暗模式下的 FLUTTER 底部导航栏答案

【问题标题】：FLUTTER bottom navigation bar in dark mode暗模式下的 FLUTTER 底部导航栏
【发布时间】：2021-07-05 12:20:13
【问题描述】：

如何在深色模式下为底部导航栏添加边框颜色

代码：

底部导航栏主题：

     BottomNavigationBarThemeData(
     
      backgroundColor: Colors.black,
      selectedItemColor: Colors.deepOrangeAccent,
      unselectedItemColor: Colors.grey,
      elevation: 20.0,
      type: BottomNavigationBarType.fixed,
      
    ),

【问题讨论】：

stackoverflow.com/questions/56577265/… 解决了吗？

标签： flutter

【解决方案1】：

一种方法是在脚手架中添加bottomNavigationBar，而不是使用内置的bottomNavigationBar 参数，而是从正文中添加。如果你只需要一个顶栏，这样的事情就可以工作，例如：

Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(width: double.maxFinite, height: 4, child: Material(elevation: 20.0, color: Colors.deepOrangeAccent),),
          BottomNavigationBar(
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
              BottomNavigationBarItem(icon: Icon(Icons.music_note), label: 'Audio'),
              BottomNavigationBarItem(icon: Icon(Icons.camera_alt), label: 'Camera'),
            ],
          ),
        ],
      ),

此代码只是在底部导航栏的顶部放置一个橙色三角形。

但是，如果您想对边框进行更多控制，您可以将 BottomNavigationBar 包装在一个小部件中，正如@Muhtar link to post 评论的帖子中所建议的那样。

【讨论】：

【解决方案2】：

我解决了问题

代码：

底部导航栏：容器（

           decoration: BoxDecoration(
             border: Border(
               top: BorderSide(
                 color: Colors.grey,
                 style: BorderStyle.solid,
                 width: 1.3

               ),
             ),
          
        ),
          child: BottomNavigationBar(
            currentIndex: cubit.current,
            items: cubit.bottom_nav_items,
            onTap: (value) {
              cubit.changeBottomNavItem(value);
            },
          ),
        ),

【讨论】：