How can I reuse the BottomNavigationBar Widget across multiple screens in Flutter?

Question

So I want to know if it is possible to create a separate class using the BottomNavigationBar widget and then use it in other classes. A working example would be helpful.

Answer 1

You can write your own class:

class BottomNavigation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        ...
      );
  }

Then import the page and use this inside the sacffold:

bottomNavigationBar: BottomNavigation,

Answer 2

maybe I don't really understand your problem. Is the BottomNavigationBar not supposed to be seen across many screens? My BottomNavigationBar is in my MyApp class, which is called by the main. From the MyApp class, I start all the screens of my App. My code looks like:

class MyApp extends StatefulWidget
{
  MyApp({Key key,}) : super(key: key);

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

class _MyAppState extends State<MyApp>
{
  int _selectedIndex = 1;

  @override
  Widget build(BuildContext context)
  {
    ///////////Here are your different screens//////////////
    final _widgetOptions = [
      Screen1(),
      Screen2(),
      Screen3(),
    ];
    /////////////////////////////////

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Name of your App',
      theme: ThemeData(primarySwatch: Colors.grey,
          accentColor: Colors.blueAccent,),

      home: Scaffold(
        backgroundColor: Colors.black12,

        body: Center
          (
          child: _widgetOptions.elementAt(_selectedIndex),
        ),


        //////////Bottom navigation////////////////
        bottomNavigationBar: Theme
          (
          data: Theme.of(context).copyWith(
            // sets the background color of the `BottomNavigationBar`
              canvasColor: Colors.white,
              // sets the active color of the `BottomNavigationBar`
              primaryColor: Colors.blueAccent,
              textTheme: Theme.of(context).textTheme.copyWith(
                  caption: new TextStyle(
                      color: Colors.grey))), // sets the inactive color of the                 
`BottomNavigationBar`
          child: new BottomNavigationBar(

            type: BottomNavigationBarType.fixed,


            items: <BottomNavigationBarItem>
            [
              new BottomNavigationBarItem(icon: Icon(Icons.local_hospital), title: Text('Screen 1')),
          new BottomNavigationBarItem(icon: Icon(Icons.search), title: Text('Screen 2')),
          new BottomNavigationBarItem(icon: Icon(Icons.play_for_work), title: Text('Screen 3')),
        ],

        currentIndex: _selectedIndex,
        fixedColor: Colors.deepPurple,
        onTap: _onItemTapped,
      ),

    ),
    /////////////End of Bottom Navigation


  ),
);
  }










  void _onItemTapped(int index)
  {
    setState(()
    {
      _selectedIndex = index;
    });

  }

}

You have to define Screen1(), Screen2() and Screen3(). In my case, they are Statefulwidgets