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.

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