Flutter multiple bottom navigation bar styles

1. Bottom navigation bar (outer arc style)

insert image description here
Implementation code:

//Introduce flutter's dart library 
import 'package:flutter/material.dart' ; 
//Startup function 
void  main ( )  = >  runApp ( MyApp ( ) ) ;

//Custom component 
class  MyApp extends StatelessWidget {
  @override
  Widget build ( BuildContext context )  { 
    //MaterialApp is flutter's page root component 
    return  MaterialApp ( 
      title :  'main root page' , 
      //home represents page information 
      home :  BottomNavBar2 ( ) 
    ) ; 
  } 
}

//Navigation bar component 
class  BottomNavBar2 extends StatefulWidget {
  @override
  _BottomNavBar2State createState ( )  = >  _BottomNavBar2State ( ) ; 
}

class  _BottomNavBar2State extends State < BottomNavBar2 >  {
  @override
  Widget build ( BuildContext context )  { 
    return  Scaffold ( 
      appBar :  AppBar ( 
        title :  Text ( "Floating Navigation Bar" ) , 
        centerTitle :  true , 
      ) , 
      //floating button 
      floatingActionButtonLocation : FloatingActionButtonLocation . centerDocked , 
      floatingActionButton :  FloatingActionButton ( 
        onPressed :  ( )  { }, 
        backgroundColor : Colors . blue , 
        child :  Icon ( Icons . add , color : Colors . white ) , 
      ) , 
      bottomNavigationBar :  BottomAppBar ( 
        shape :  CircularNotchedRectangle ( ) ,   //Circular outer arc effect 
        color : Colors . blue , 
        // custom navbar 
        child :  Row (
          //Main axis alignment/ Align both sides 
          mainAxisAlignment : MainAxisAlignment . spaceAround , 
          children :  < Widget > [ 
            IconButton ( icon :  Icon ( Icons . home , color : Colors . white ) , onPressed :  ( )  { } ) , 
            IconButton ( icon :  Icon ( Icons . home , color: Colors . white ) , onPressed :  ( )  { } ) , 
          ] , 
        ) , 
      ) , 
    ) ; 
  } 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

2. Bottom navigation bar (standard style)

insert image description here
Implementation code:

//Introduce flutter's dart library 
import  'package:flutter/material.dart' ; 
//Startup function 
void  main ( )  =>  runApp ( MyApp ( ) ) ;

//Custom component 
class  MyApp  extends  StatelessWidget  {
  @override
  Widget build ( BuildContext context )  { 
    //MaterialApp is flutter's page root component 
    return  MaterialApp ( 
      title :  'main root page' , 
      //home represents page information 
      home :  BottomNavBar ( ) 
    ) ; 
  } 
}

//The bottom navigation bar component 
class  BottomNavBar  extends  StatefulWidget  {
  @override
  _BottomNaacBarState createState ( )  =>  _BottomNaacBarState ( ) ; 
}

class  _BottomNaacBarState  extends  State < BottomNavBar >  { 
  //Display the specified content when the navigation is clicked 
  List < Widget > list =  [ Text ( 'Bicycle' ) ,  Text ( 'Car' ) ,  Text ( 'Airplane' ) ] ; 
  //The currently clicked Navigation subscript 
  int _currentController =  1 ;
  @override
  Widget build ( BuildContext context )  { 
    return  Scaffold ( 
      appBar :  AppBar ( 
        title :  Text ( 'Bottom Navigation Bar' ) , 
      ) , 
      //The main content of the page display 
      body : list [ _currentController ] , 
      bottomNavigationBar :  BottomNavigationBar ( 
          //The currently selected Navigation bar 
          currentIndex : _currentController , 
          //Event triggered by clicking on the navigation bar 
          onTap :  (int index )  { 
            setState ( ( )  { 
              _currentController = index ; 
            } ) ; 
          } , 
          items :  < BottomNavigationBarItem > [ 
            BottomNavigationBarItem ( 
                icon :  Icon ( Icons . directions_bike ) , title :  Text ( 'Bike' ) ) , 
            BottomNavigationBarItem ( 
                icon : Icon ( Icons . directions_car ) , title :  Text ( 'Car' ) ) , 
            BottomNavigationBarItem ( 
                icon :  Icon ( Icons . airplanemode_active ) , title :  Text ( 'Airplane' ) ) , 
          ] ) , 
    ) ; 
  } 
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

3. Bottom navigation bar (similar to salted fish style)

insert image description here
Implementation code:

//The bottom navigation bar component 
class  BottomNavBar  extends  StatefulWidget  {
  @override
  _BottomNaacBarState createState ( )  =>  _BottomNaacBarState ( ) ; 
}

class  _BottomNaacBarState  extends  State < BottomNavBar >  { 
  //Display the specified content when the navigation is clicked 
  List < Widget > list =  [ Text ( 'Bicycle' ) ,  Text ( 'Car' ) ,  Text ( 'Airplane' ) ] ; 
  //The currently clicked Navigation subscript 
  int _currentController =  1 ;
  @override
  Widget build ( BuildContext context )  { 
    return  Scaffold ( 
      appBar :  AppBar ( 
        title :  Text ( 'Bottom Navigation Bar' ) , 
      ) , 
      //The main content of the page display 
      body : list [ _currentController ] , 
      //The floating button replaces the middle navigation button 
      floatingActionButtonLocation : FloatingActionButtonLocation . centerDocked , 
      floatingActionButton :  Container ( 
        width : 60 , 
        height :  60 , 
        padding : EdgeInsets . all ( 8 ) , 
        decoration :  BoxDecoration ( 
          borderRadius : BorderRadius . circular ( 50 ) , 
          color : Colors . white
         ) , 
        child :  FloatingActionButton ( 
          child :  Icon ( Icons . directions_car) , 
          onPressed :  ( )  { 
            setState ( ( )  { 
              _currentController =  1 ; 
            } ) ; 
          } , 
        ) 
      ) , 
      bottomNavigationBar :  BottomNavigationBar ( 
          //The currently selected navigation bar 
          currentIndex : _currentController , 
          //The event triggered by clicking the navigation bar 
          onTap :  ( int index )  { 
            setState ( ( )  {
              _currentController = index ; 
            } ) ; 
          } , 
          items :  < BottomNavigationBarItem > [ 
            BottomNavigationBarItem ( 
                icon :  Icon ( Icons . directions_bike ) , title :  Text ( 'Bike' ) ) , 
            BottomNavigationBarItem ( 
                icon :  Icon ( Icons . directions_car ) ,title :  Text ( 'Car' ) ) , 
            BottomNavigationBarItem ( 
                icon :  Icon ( Icons . airplanemode_active ) , title :  Text ( 'Airplane' ) ) , 
          ] ) , 
    ) ; 
  } 
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

Related: Flutter multiple bottom navigation bar styles