flutter - Flutter - 如何在底部导航栏中制作圆形按钮

Question

我想在导航栏中间制作一个类似于 youtube 的圆形按钮。

这是我的代码

          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: Colors.grey,
            ),
            label: 'Home',
            activeIcon: Icon(
              Icons.home,
              color: Colors.green,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
              color: Colors.grey,
            ),
            label: 'Search',
            activeIcon: Icon(
              Icons.search,
              color: Colors.green,
            ),
          ),
          BottomNavigationBarItem(
            icon: OutlinedButton(
              onPressed: () {
                print('xxx');
              },
              child: Icon(
                Icons.add,
                color: Colors.grey,
              ),
              style: OutlinedButton.styleFrom(
                primary: Colors.grey,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.shopping_cart,
              color: Colors.grey,
            ),
            activeIcon: Icon(
              Icons.shopping_cart,
              color: Colors.green,
            ),
            label: 'Groceries',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
              color: Colors.grey,
            ),
            activeIcon: Icon(
              Icons.person,
              color: Colors.green,
            ),
            label: 'Account',
          ),

这就是我想要的最终结果。

标签： flutter

Answer 1

     Icon(
        Icons.add_circle_outline,
        color: Colors.white,
        size: 30,
       ),

您可以使用颤振内置图标。