[shutter 3-1] advanced tutorial of shutter – bottom navigation bar

Time:2022-5-8

By Vlad
Source | Vlad (official account: fulade_me)

BottomNavigationBar

BottomNavigationBarandBottomNavigationBarItemCooperate to jointly display the bottom status bar in the shuttle. The bottom status bar is a very important control at the mobile end.

Have a look firstBottomNavigationBarConstruction method

BottomNavigationBar({
    // key
    Key key,
    ///Bottomnavigationbaritem array
    @required this.items,
    ///Click event method
    this.onTap,
    ///Subscript of the currently selected element
    this.currentIndex = 0,
    ///Z coordinate of the bottom navigation bar
    this.elevation,
    ///The default is bottomnavigationbartype Generally, we use bottomnavigationbartype fixed
    this.type,
    ///The value of the selected item color
    Color fixedColor,
    ///Background color
    this.backgroundColor,
    ///The size of the bottomnavigationbaritem icon
    this.iconSize = 24.0,
    ///The color of icons and text when selected
    Color selectedItemColor,
    ///Color of icon and text when not selected
    this.unselectedItemColor,
    //The style of the sub item when selected
    this.selectedIconTheme,
    ///Style of sub item when not selected
    this.unselectedIconTheme,
    //Font size when selected
    this.selectedFontSize = 14.0,
    ///Font size when not selected
    this.unselectedFontSize = 12.0,
    ///Font style when selected
    this.selectedLabelStyle,
    ///Font style when not selected
    this.unselectedLabelStyle,
    ///Show labels for unselected bottomnavigationbaritem
    this.showSelectedLabels = true,
    ////Whether to display labels for the selected bottomnavigationbaritem
    this.showUnselectedLabels,
    ///PC side or web side
    this.mouseCursor,
})

Let’s make a demo to switch colors by clicking the button in the bottom status bar

class _BottomNavigationBarDemoPageState
    extends State<BottomNavigationBarDemoPage> {
  int selectedIndex = 0;
  List<Container> containerList = [
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.yellow,
    ),
    Container(
      color: Colors.green,
    )
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("BottomNavigationBarDemo"),
        backgroundColor: Colors.blue,
      ),
      body: containerList[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        ///This is very important
        type: BottomNavigationBarType.fixed,
        currentIndex: selectedIndex,
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text('F1'),
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            title: Text('F2'),
            icon: Icon(Icons.book),
          ),
          BottomNavigationBarItem(
            title: Text('F3'),
            icon: Icon(Icons.school),
          ),
          BottomNavigationBarItem(
            title: Text('F4'),
            icon: Icon(Icons.perm_identity),
          ),
        ],
      ),
    );
  }
}
  • ScaffoldReceive oneBottomNavigationBarAsbottomNavigationBarAnd thenBottomNavigationBarReceive oneitemsArray of. Four are passed in this arrayBottomNavigationBarItemThe objects are namedF1F2F3F4
  • typeParameter passed in isBottomNavigationBarType.fixed, default isBottomNavigationBarType.shifting, the default effect is only when selectedBottomNavigationBarItemText is displayed only when. Set asBottomNavigationBarType.fixedText and icons are also displayed when not selected
  • onTapThe implementation is a method, and the parameter is the current clickedBottomNavigationBarItemThe subscript of is called after being clicked heresetStateTo refresh the color of the page

The effect is as follows:

[shutter 3-1] advanced tutorial of shutter - bottom navigation bar

In daily development, the above effects can basically meet most needs
If you want to customize the style of icon below, you can use bottomappbar

Here are also two good libraries

  • tab_bar_animation

    Link: https://github.com/tunitowen/…
    The effect is as follows:

[shutter 3-1] advanced tutorial of shutter - bottom navigation bar

  • simpleanimations
    Link: https://github.com/TechieBlos…
    The effect is as follows:

[shutter 3-1] advanced tutorial of shutter - bottom navigation bar

To experience the operation effect of the above example, you can go to my GitHub warehouse projectflutter_app->lib->routes->bottom_navigation_page.dartView it, and you can download it, run it and experience it.


[shutter 3-1] advanced tutorial of shutter - bottom navigation bar