将边框半径应用于 BottomNavigationBar

Question

我需要将边框半径应用于 BottomNavigationBar 宽度。找到一个有效的解决方案很棘手 - 我需要稍后对栏应用更多样式，并且还需要一个与之兼容的解决方案（主要是：浮动操作按钮和阴影）。关于如何做有什么建议吗？

代码和屏幕：

看我有：

看看我需要：

代码：（在我的选项卡屏幕的支架中）：

bottomNavigationBar: BottomNavigationBar(
    onTap: _selectPage,
    showSelectedLabels: false,
    showUnselectedLabels: false,
    currentIndex: _selectedPageIndex,
    type: BottomNavigationBarType.fixed,
    items: [
      //home
      BottomNavigationBarItem(
        icon: Icon(Icons.home, color: _customColorScheme['Icon 1']),
        activeIcon: Icon(Icons.home, color: _customColorScheme['Icon 2']),
        label: '',
      ),
      //favorite
      BottomNavigationBarItem(
        icon: Icon(Icons.favorite, color: _customColorScheme['Icon 1']),
        activeIcon:
            Icon(Icons.favorite, color: _customColorScheme['Icon 2']),
        label: '',
      ),
      //loockback
      BottomNavigationBarItem(
        icon: Icon(Icons.bar_chart, color: _customColorScheme['Icon 1']),
        activeIcon:
            Icon(Icons.bar_chart, color: _customColorScheme['Icon 2']),
        label: '',
      ),
      //info & support
      BottomNavigationBarItem(
        icon: Icon(Icons.info, color: _customColorScheme['Icon 1']),
        activeIcon: Icon(Icons.info, color: _customColorScheme['Icon 2']),
        label: '',
      ),
    ],
  ),

Answer 1

你可以试试这个：

bottomNavigationBar: Container(                                             
  decoration: BoxDecoration(                                                   
    borderRadius: BorderRadius.only(                                           
      topRight: Radius.circular(30), topLeft: Radius.circular(30)),            
    boxShadow: [                                                               
      BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),       
    ],                                                                         
  ),                                                                           
  child: ClipRRect(                                                            
    borderRadius: BorderRadius.only(                                           
    topLeft: Radius.circular(30.0),                                            
    topRight: Radius.circular(30.0),                                           
    ),                                                                         
    child: BottomNavigationBar(                                                
      items: <BottomNavigationBarItem>[                                        
        BottomNavigationBarItem(                                               
          icon: Icon(Icons.favorite), title: Text('Favourite')),               
        BottomNavigationBarItem(                                               
          icon: Icon(Icons.favorite), title: Text('Favourite'))                
      ],                                                                       
    ),                                                                         
  )                                                                            
)

Answer 2

您可以使用一个包 animated_bottom_navigation_bar: ^0.3.2 它们有不同数量的导航栏，并且有一个您需要的圆角导航栏。我希望这能满足您的需求。