底部导航栏圆角

Question

我试图给我的底部导航栏一些圆角。为此，我必须使其容器的背景透明，但我不知道如何。

这就是我所做的Scaffold：

bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0), ),
        child:BottomNavigationBar(
          //elevation: 0.0,
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.white10,

结果：

默认情况下仍然是白色背景。我试图将我的包装ClipRRect在一个具有透明背景的容器中，但没有用。

任何的想法 ？

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

在 Scaffold 中，设置extendBody属性为 true。这让 body 延伸到 Scaffold 的底部，而不是只延伸到 bottomNavigationBar 的顶部。这应该可以解决您的问题。

例子：

Widget build(BuildContext context) {
    return Scaffold(
      body: bodyOfApp(),
      extendBody: true,
      backgroundColor: Colors.transparent,
      bottomNavigationBar: BottomNavBar(),
    );
   }
  

Answer 3

上述所有答案都以某种方式使用 ClipRRect，这在计算方面非常昂贵。因此，作为使用 Material Widget 的替代方法，方法如下：

bottomNavigationBar: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(30), topLeft: Radius.circular(30)),
      ),
      child: Material(
        elevation: 0.0,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0)),
        child: BottomNavigationBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.favorite), title: Text('Favourite')),
            BottomNavigationBarItem(
                icon: Icon(Icons.favorite), title: Text('Favourite'))
          ],
        ),
      )),
)