Flutter provides convenient bottom navigation bar widget components

attribute
  • Items: A specific array of bottom tabs
  • CurrentIndex: _selectedIndex,// The currently selected index
  • FixedColor: color.blue,// The selected color
  • OnTap: _onItemTapped,// Click events
  • Elevation: 20,// What happens when the shadow size is not found

– type: BottomNavigationBarType fixed, / / TAB at the bottom of the type, if it is shifting only, according to the selected and have a rolling effect. If items have more than three tabs, it is a Shifting mode

  • BackgroundColor: color.red [200],// backgroundColor of the bottom navigation bar
  • IconSize: 24,// The size of the TAB icon
  • SelectedItemColor: colors. green, // The selected TAB icon and title Colors. Mutually exclusive with fixedColor, looks the same as fixedColor
  • UnselectedItemColor: colors. black,// The color of the icon and title of the unselected TAB.
  • SelectedIconTheme: IconThemeData(color: color.blue,opacity: 1),// The selected t-unselectedicontheme: IconThemeData(color: opacity: 1) Color.green,opacity: 1),// The theme of the icon of an unselected TAB has a higher priority than unselectedItemColor
  • SelectedFontSize: 24,// The title size of the selected TAB
  • UnselectedFontSize: 18,// The size of the title of an unselected TAB
  • SelectedLabelStyle: TextStyle(color: colors.red),// The selected TAB title style, priority is lower than selectedIconTheme
  • UnselectedLabelStyle: TextStyle(color: colors.red),// The style of the title of an unselected TAB, which has a lower priority than unselectedIconTheme
  • ShowSelectedLabels: false,// Whether to display the title of the selected TAB
  • ShowUnselectedLabels: true,// Whether to display the title of unselected tabs if false

class _MyHomePageState extends State<MyHomePage> { int _selectedIndex = 1; @override Widget build(BuildContext context) {return Scaffold(appBar: appBar (// navigation bar title: Text("App Name"), Actions: <Widget>[// Navigation bar right menu IconButton(icon: icon (icon.share), onPressed: () {}),], backgroundColor: Color.red [200],), bottomNavigationBar: bottomNavigationBar (// bottomNavigationBar: <BottomNavigationBarItem>[ BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')), BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')), BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')), BottomNavigationBarItem(icon: Icon(Icons.search),title: Text('search')), BottomNavigationBarItem(icon: Icon(icon.delete),title: Text('delete')),], currentIndex: _selectedIndex,// the currently selected index // fixedColor: Colors. Blue,// The selected color onTap: _onItemTapped,// Click event elevation: 20,// Shadow size type: BottomNavigationBarType fixed, / / TAB at the bottom of the type, if it is shifting only, according to the selected and scrolling effect. BackgroundColor: Colors. Red [200],// bottom navigation bar backgroundColor iconSize: 24,// TAB icon size selectedItemColor: Colors. Green,// TAB icon and title color selected. UnselectedItemColor: color.black,// The icon and title Colors of unselected tabs. selectedIconTheme: IconThemeData(color: Colors.blue,opacity: 1),// unselectedIconTheme: IconThemeData(color: color.green,opacity: 1),// unselectedFontSize: 24,// The size of the title of the selected TAB unselectedFontSize: SelectedLabelStyle: TextStyle(color: RGB (51, 51, 51)) Color.red),// Select TAB title style, priority lower than selectedIconTheme unselectedLabelStyle: TextStyle Color.red),// Unselected TAB title style, priority lower than unselectedIconTheme showSelectedLabels: ShowUnselectedLabels: true, showUnselectedLabels: true, showUnselectedLabels: false,); } void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); }}Copy the code