Flutter – Keep bottom navigation bar visible when navigating to another page

At times keeping the base route consistently noticeable is urgent for a decent client experience; an incredible model is the Facebook application!

So we will carry out a similar impact with just 20 lines of code in Dart and Flutter.

Need a persistent/same Bottom Navigation Bar for all screens – Flutter

Add the accompanying to your pubspec.yaml. Try to check for the most recent form here.

dependencies: 
custom_navigator: ^0.2.0

Install it

$ flutter pub get

Import it

import ‘package:custom_navigator/custom_navigator.dart’;

The actual code

The case we’re building is pretty simple:

  • Main screen
  • Tab screen
  • Details screen

Presenting CustomScaffold

It’s a stateful gadget that utilizes the CustomNavigator to deal with thing progress of BottomNavigationBar with settled route while keeping the BottomNavigationBar obvious!

How it functions

  • The CustomScaffold gadget consequently handles the progress to another page when you click on a tab. You should realize that:
  • Platform can’t be invalid
  • BottomNavigationBar can’t be invalid
  • Youngsters can’t be invalid
  • Number of BottomNavigationBar things == number of youngsters (pages) in your CustomScaffold.
  • The first page in quite a while rundown will be taken in thought while disregarding the body quality in Scaffold.
  • Youngsters will be planned to things all together, for example, item1 => page1, item2 => page2
 // Here’s the custom scaffold widget
// It takes a normal scaffold with mandatory bottom navigation bar
// and children who are your pages
return CustomScaffold(
scaffold: Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: _items,
),
), // Children are the pages that will be shown by every click
// They should placed in order such as
// `page 0` will be presented when `item 0` in the
// [BottomNavigationBar] clicked.
children: <Widget>[
Page(‘0’),
Page(‘1’),
Page(‘2’),
], // Called when one of the [items] is tapped.
onItemTap: (index) {},
);

Let’s code!

Tab Page

This is the page of each tab in the bottom navigation.

class Page extends StatelessWidget {
  final String title;

  const Page(this.title) : assert(title != null);

  @override
  Widget build(BuildContext context) {
    final text = Text(title);

    return Scaffold(
      body: Container(
        child: Center(
            child: FlatButton(
                onPressed: () => _openDetailsPage(context), child: text)),
      ),
      appBar: AppBar(
        title: text,
      ),
    );
  }

  //Use the navigator like you usually do with .of(context) method
  _openDetailsPage(BuildContext context) => Navigator.of(context)
      .push(MaterialPageRoute(builder: (context) => DetailsPage(title)));

//  _openDetailsPage(BuildContext context) => mainNavigatorKey.currentState.push(MaterialPageRoute(builder: (context) => DetailsPage(title)));

}

Details screen

The screen we navigate to

class DetailsPage extends StatelessWidget {
  final String title;

  const DetailsPage(this.title) : assert(title != null);

  @override
  Widget build(BuildContext context) {
    final text = Text('Details of $title');
    return Scaffold(
      body: Container(
        child: Center(child: text),
      ),
      appBar: AppBar(title: text),
    );
  }
}

Home screen

Let’s put it all together

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Custom navigator takes a global key if you want to access the
  // navigator from outside it's widget tree subtree
  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    // Here's the custom scaffold widget
    // It takes a normal scaffold with mandatory bottom navigation bar
    // and children who are your pages
    return CustomScaffold(
      scaffold: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: _items,
        ),
      ),

      // Children are the pages that will be shown by every click
      // They should placed in order such as
      // `page 0` will be presented when `item 0` in the [BottomNavigationBar] clicked.
      children: <Widget>[
        Page('0'),
        Page('1'),
        Page('2'),
      ],

      // Called when one of the [items] is tapped.
      onItemTap: (index) {},
    );
  }

  final _items = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('home')),
    BottomNavigationBarItem(icon: Icon(Icons.event), title: Text('events')),
    BottomNavigationBarItem(
        icon: Icon(Icons.save_alt), title: Text('downloads')),
  ];
}

Final result

Summery

So it’s all About All possible solutions. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

TypeError: this.getOptions is not a function in vue.js

Leave a Comment

x