封装底部导航栏,悬浮的BottomNavigationBar

项目需求,要一个悬浮的导航栏,flutter所有展示的组件都是Widget,所以修改一下就出来了.话不都说,上代码!

@override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,

      body: IndexedStack(
        index: this._currentindex,
        children: this.pagelist,
      ),
      // this.pagelist[this._currentindex],

      bottomNavigationBar: Container(
        margin: const EdgeInsets.only(left: 15, right: 15, bottom: 20),
        padding: const EdgeInsets.only(
          left: 5,
          right: 5,
        ),
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color.fromARGB(255, 52, 6, 143),
              Color.fromARGB(255, 144, 122, 174),
              Color.fromARGB(255, 45, 6, 130),
            ],
          ),
          borderRadius: BorderRadius.circular(29),
        ),
        
        child: BottomNavigationBar(
          backgroundColor: const Color.fromARGB(0, 80, 75, 75),
          selectedFontSize: 11,
          unselectedFontSize: 11,
          selectedItemColor: getBlackColor(),
          unselectedItemColor: getBlackColor(),
       
          type: BottomNavigationBarType.fixed, //大于3个item要重载，否则不显示
          currentIndex: this._currentindex,
          onTap: (int index) {
            if (this._currentindex != index) {
              setState(() {
                this._currentindex = index;
              });
            }
          },
          items: [
            BottomNavigationBarItem(
              icon: iconImage('images/earn/Earn.png'),
              activeIcon: iconImage('images/earn/earnSelect.png'),
              label: 'Earn'.tr,
            ),
            BottomNavigationBarItem(
              icon: iconImage('images/earn/Discover.png'),
              activeIcon: iconImage('images/earn/DiscoverSelect.png'),
              label: 'Discover'.tr,
            ),
            BottomNavigationBarItem(
              icon: iconImage('images/earn/Social.png'),
              activeIcon: iconImage('images/earn/SocialSelect.png'),
              label: 'Social'.tr,
            ),
            BottomNavigationBarItem(
              icon: iconImage('images/earn/Market.png'),
              activeIcon: iconImage('images/earn/MarketSelect.png'),
              label: 'Market'.tr,
            ),
          ],
        ),
      ),
    );
  }