flutter BottomNavigationBar学习

2022年flutter的版本已经更新到2.10.0以上了，但是网上很多资料还是以前的版本，在这里做一个记录。

class BottomNavigationWidget extends StatefulWidget {
  const BottomNavigationWidget({Key? key}) : super(key: key);

  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  int _currentIndex = 0;
  List<Widget> pages=[];//这里page的数量要和BottomNavigationBarItem一致
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //这里添加了5个page
    pages..add(HomeRoute())
    ..add(ClassificationionRoute())
    ..add(CollegeRoute())
    ..add(ShoppingCartRoute())
    ..add(MineRoute());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top:false,
        bottom: false,
        child:pages[_currentIndex] //这里根据选中的BottomNavigation下标，切换body
      ) ,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,//设置背景
        selectedItemColor: Colors.red,//选择中的颜色，包括文字和图标，如果图标是Icon，Icon也会跟着颜色改变
        unselectedItemColor: Colors.blue,//未选中的颜色，同上，文字和icon
        showSelectedLabels: true,//是否显示选中的label
        type: BottomNavigationBarType.fixed,//选中时是那种模式，高亮变宽，或者不改变宽度
        currentIndex: _currentIndex, //这个是当前选中的下标
        showUnselectedLabels: true,//是否显示未选中的label
        items: [
          BottomNavigationBarItem(
              icon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
              activeIcon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
              label: '首页',
               ),
          BottomNavigationBarItem(
              icon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
            activeIcon: Icon(Icons.add),
              label: '分类',
              ),
          BottomNavigationBarItem(
              icon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
              activeIcon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
              label: '发现'),
          BottomNavigationBarItem(
              icon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
              activeIcon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
              label: '购物车'),
          BottomNavigationBarItem(
              icon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
              activeIcon: Image.network(
                  '网络地址',
                  width: 20,
                  height: 20),
              label: '我的')
        ],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}