How to implement Toolbar and Bottom Navigation in Flutter

Toolbar and Bottom Navigation in Flutter

To achieve this you need-

Scaffold

 1.appBar
 2.body
 3.bottomNavigationBar

Scaffold-

 It uses for material design and and provide a powerful and functional  structure to your app.

 Scaffold(
   appBar:  
   body:    
   bottomNavigationBar:
 )

AppBar

 App bar is to show title bar at the top of screen. 

appBar: AppBar(
  title: Text('Title'),
  centerTitle: true,
  backgroundColor: AppTheme.appBarColor,
  actions: <Widget>[
    settings,
    search
   ],
)

BottomNavigationBar

 Bottom Navigation is uses to show bottom tab bar.

bottomNavigationBar: BottomNavigationBar(
   showUnselectedLabels: true,
   fixedColor: Colors.red,
   unselectedItemColor: Colors.black,
   selectedFontSize: 12,
   unselectedFontSize: 12,
   onTap: _onBottomTabTapped,
   currentIndex: _currentIndex,
   items: [
     BottomNavigationBarItem(icon: Icon(Icons.home),
     title: Text('Home')),
     BottomNavigationBarItem(icon: Icon(Icons.map),
     title: Text('Map')),
     BottomNavigationBarItem(icon: Icon(Icons.bookmark),
     title: Text('Bookmark')),
     BottomNavigationBarItem(icon: Icon(Icons.email),
     title: Text('Email'))
],
)

Below is the full code you can customize according to your need

class DemoTitleBottomBar extends StatefulWidget {
  @override
  _DemoTitleBottomBarState createState() => _DemoTitleBottomBarState();
}

class _DemoTitleBottomBarState extends State<DemoTitleBottomBar> {

  int _currentIndex=0;

  _onBottomTabTapped(int index) {
    print('You selected $index');
    setState(() {
      _currentIndex=index;
    });
  }

  @override
  Widget build(BuildContext context) {

    final body = Container(
      child: Center(child: Text('Hi this is a body',style: TextStyle(fontSize: 22),),)
    );

    final settings = IconButton(
      icon: Icon(Icons.settings),
      onPressed: (){
        print('Settings button pressed');
      },
    );

    final search = IconButton(
      icon: Icon(Icons.search),
      onPressed: (){
        print('Settings button pressed');
      },
    );

    return Scaffold(
        appBar: AppBar(
          title: Text('Title'),
          centerTitle: true,
          backgroundColor: AppTheme.appBarColor,
          actions: <Widget>[settings,search] ,
        ),

        body: Container(
          decoration: AppTheme.bodyColor,
          child: body,
        ),

        bottomNavigationBar: BottomNavigationBar(
          showUnselectedLabels: true,
          fixedColor: Colors.red,
          unselectedItemColor: Colors.black,
          selectedFontSize: 12,
          unselectedFontSize: 12,
          onTap:  _onBottomTabTapped,
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(icon: Icon(Icons.map),title:  Text('Map')),
            BottomNavigationBarItem(icon: Icon(Icons.bookmark), title: Text('Bookmark')),
            BottomNavigationBarItem(icon: Icon(Icons.email), title: Text('Email'))
          ],
        )
    );
  }
}

• Tweet
• Share
• Share
• Share
• Share

Related Post