The author | | vlad source vlad (public number: fulade_me)

BottomNavigationBar

The BottomNavigationBar and BottomNavigationBarItem work together to display the bottom status bar inside a Flutter. The bottom status bar is an important control on the mobile side.

Look at the BottomNavigationBar constructor first


BottomNavigationBar({
    // key
    Key key,
    /// BottomNavigationBarItem array
    @required this.items,
    /// Click event method
    this.onTap,
    /// Index of the currently selected element
    this.currentIndex = 0./// The Z coordinate of the bottom navigation bar
    this.elevation,
    /// The default is BottomNavigationBarType. Usually we use BottomNavigationBarType shifting. Fixed
    this.type,
    /// Select the value of the item color
    Color fixedColor,
    /// The background color
    this.backgroundColor,
    /// BottomNavigationBarItem Size of the icon
    this.iconSize = 24.0./// The color of the icon and text when selected
    Color selectedItemColor,
    /// The color of the icon and text when unchecked
    this.unselectedItemColor,
    // The style of the subitem when selected
    this.selectedIconTheme,
    /// The style of the child Item when it is not selected
    this.unselectedIconTheme,
    // Font size when selected
    this.selectedFontSize = 14.0./// Font size when unchecked
    this.unselectedFontSize = 12.0./// Font style when selected
    this.selectedLabelStyle,
    /// Font style when not selected
    this.unselectedLabelStyle,
    /// Whether to display the label for the unselected BottomNavigationBarItem
    this.showSelectedLabels = true.//// Whether to display the label for the selected BottomNavigationBarItem
    this.showUnselectedLabels,
    /// PC or Web
    this.mouseCursor,
})
Copy the code

Let’s do a Demo of clicking the bottom status bar button to switch colors

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 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), ), ], ), ); }}Copy the code

  • The Scaffold receives a BottomNavigationBar as an argument to the BottomNavigationBar, which then receives an array of items. The array contains four BottomNavigationBarItem objects named F1, F2, F3, and F4

  • The type parameter of the incoming is BottomNavigationBarType fixed, the default is BottomNavigationBarType shifting, the effect of the default is only when the selected BottomNavigationBarItem will display text. Set to BottomNavigationBarType. Fixed and not under the selected text and icon will be shown

  • OnTap implements a method that takes the subscript of the current BottomNavigationBarItem that is clicked, where setState is called to refresh the page color

The effect is as follows:

If you want to customize the style of the Icon below, you can use BottomAppBar

There are also two good libraries

  • tab_bar_animation

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

  • Simpleanimations link: github.com/TechieBloss… The effect is as follows:

To see how the above example works, go to my Github repository project flutter_app->lib->routes->bottom_navigation_page.dart and download it and run it.