将边框半径应用于 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

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

Answer 2

你可以试试这个：

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'))                
      ],                                                                       
    ),                                                                         
  )                                                                            
)

将边框半径应用于 BottomNavigationBar

Applying Border Radius to the BottomNavigationBar

flutter

flutter-layout

flutter-bottomnavigation