Flutter multiple bottom navigation bar styles
1. Bottom navigation bar (outer arc style)
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)
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)
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
