如何在flutter中创建自定义BottomNavigationBar？

Question

所以我有这个来自 Comida 的设计，他们的底部导航栏非常好。我已经尝试过材料 BottomNavigationBar。这是代码

bottomNavigationBar: Container(
      padding: const EdgeInsets.only(bottom: 15.0, top: 5.0),
      decoration: BoxDecoration(
        color: AppColors.primaryColor,
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(15.0),
          topLeft: Radius.circular(15.0),
        ),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(15.0),
          topLeft: Radius.circular(15.0),
        ),
        child: BottomNavigationBar(
          onTap: onTabTapped,
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.shopping_bag_outlined),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: '',
            ),
          ],
          backgroundColor: AppColors.primaryColor,
          selectedItemColor: Colors.white,
          unselectedItemColor: AppColors.accentColor,
        ),
      ),
    ),

但我似乎没有办法将其转换为这个

我刚开始使用颤振，一切正常，但这让我陷入了困境。任何帮助将不胜感激。

Answer 1

您是否在寻找类似的东西，flutter_snake_navigationbar，第二个演示与您的类似

[更新]

bottomNavigationBar: SnakeNavigationBar.color(
        behaviour: snakeBarStyle,
        snakeShape: snakeShape,
        shape: bottomBarShape,
        padding: padding,

        ///configuration for SnakeNavigationBar.color
        snakeViewColor: selectedColor,
        selectedItemColor:
            snakeShape == SnakeShape.indicator ? selectedColor : null,
        unselectedItemColor: Colors.blueGrey,

        ///configuration for SnakeNavigationBar.gradient
        // snakeViewGradient: selectedGradient,
        // selectedItemGradient: snakeShape == SnakeShape.indicator ? selectedGradient : null,
        // unselectedItemGradient: unselectedGradient,

        showUnselectedLabels: showUnselectedLabels,
        showSelectedLabels: showSelectedLabels,

        currentIndex: _selectedItemPosition,
        onTap: (index) => setState(() => _selectedItemPosition = index),
        items: [
          const BottomNavigationBarItem(
              icon: Icon(Icons.notifications), label: 'tickets'),
          const BottomNavigationBarItem(
              icon: Icon(CustomIcons.calendar), label: 'calendar'),
          const BottomNavigationBarItem(
              icon: Icon(CustomIcons.home), label: 'home'),
          const BottomNavigationBarItem(
              icon: Icon(CustomIcons.podcasts), label: 'microphone'),
          const BottomNavigationBarItem(
              icon: Icon(CustomIcons.search), label: 'search')
        ],
        selectedLabelStyle: const TextStyle(fontSize: 14),
        unselectedLabelStyle: const TextStyle(fontSize: 10),
      ),

...

snakeBarStyle = SnakeBarBehaviour.pinned;
          snakeShape = SnakeShape.circle;
          padding = EdgeInsets.zero;
          bottomBarShape = RoundedRectangleBorder(borderRadius: _borderRadius);