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

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 namedF1、F2、F3、F4
• 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:

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:

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

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.

---