[Flutter 3-1] Flutter Hands-on Tutorial UI Layout and Widget - Use of BottomNavigationBar in the Bottom Navigation Bar

Author | Vlad
Source | Vlad (public account: fulade_me)

BottomNavigationBar

BottomNavigationBarBottomNavigationBarItemCooperate with to display the bottom status bar in Flutter. The bottom status bar is a very important control on the mobile terminal.

First look at BottomNavigationBarthe construction method

BottomNavigationBar({
    // key
    Key key,
    /// BottomNavigationBarItem 数组
    @required this.items,
    /// 点击事件方法
    this.onTap,
    /// 当前选中的 元素下标
    this.currentIndex = 0,
    ///  底部导航栏的Z坐标
    this.elevation,
    /// 默认是 BottomNavigationBarType.shifting 一般我们使用 BottomNavigationBarType.fixed
    this.type,
    /// 选中项目颜色的值
    Color fixedColor,
    /// 背景颜色
    this.backgroundColor,
    /// BottomNavigationBarItem图标的大小
    this.iconSize = 24.0,
    /// 选中时图标和文字的颜色
    Color selectedItemColor,
    /// 未选中时图标和文字的颜色
    this.unselectedItemColor,
    // 选中时的子Item的样式
    this.selectedIconTheme,
    /// 未选中时的子Item的样式
    this.unselectedIconTheme,
    // 选中时字体大小
    this.selectedFontSize = 14.0,
    /// 未选中时的字体大小
    this.unselectedFontSize = 12.0,
    /// 选中的时候的字体样式
    this.selectedLabelStyle,
    /// 未选中时的字体样式
    this.unselectedLabelStyle,
    /// 是否为未选择的BottomNavigationBarItem显示标签
    this.showSelectedLabels = true,
     是否为选定的BottomNavigationBarItem显示标签
    this.showUnselectedLabels,
    /// pc端或web端使用
    this.mouseCursor,
})

Let's make a demo that clicks 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(
        /// 这个很重要
        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 an BottomNavigationBaras bottomNavigationBarparameter, and then BottomNavigationBarreceive an itemsarray, in which 4 BottomNavigationBarItemobjects are passed in named F1, F2, F3,F4

• typeThe parameter is passed in BottomNavigationBarType.fixed, the default is BottomNavigationBarType.shifting, and the default effect is that BottomNavigationBarItemthe text will only be displayed when it is selected. BottomNavigationBarType.fixedText and icons will also be displayed when it is set to unselected

• onTapBottomNavigationBarItemWhat is implemented is a method, the parameter is the current subscript that is clicked , and it is called setStateto refresh the color of the page after being clicked here

The effect is as follows:

In daily development, the above effects can basically meet most needs.
If you want to customize the style of the following Icon, you can use BottomAppBar

Here are also two good libraries

• tab_bar_animation

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

• Simpleanimations
  link: https://github.com/TechieBlossom/simpleanimations
  The effect is as follows:
  

If you want to experience the running effect of the above example, you can go to my Github warehouse project flutter_app-> lib-> routes-> bottom_navigation_page.dartview, and you can download and run it and experience it.

---