我正在使用 flutter bottomNavigatonBar 小部件，有什么可以提高的吗？

Question

This is what I want !

        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          notchMargin: 4.0,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.notifications),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.perm_identity),
                onPressed: () {},
              ),
            ],
          ),
        ),

我希望导航栏从底部稍微凸起并具有圆形边框。目前它位于屏幕底部。

Answer 1

这就是你想要的。但是，我建议您不要使用 IconButton，而是使用 FlatButton，因为它们使用起来更简单，而且据我所知，IconButton 的宽度和高度不能被覆盖，所以当您按下 IconButton 时用它包裹的容器，会显得很不对劲。

但对于您的解决方案，用容器包裹 IconButton 并使用 decoration 属性添加阴影并产生凸起效果。


    Container(
      width: 100,
      decoration : BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        color: Colors.red,
        boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 2, offset: Offset(5,5))

        ]

      ),
      child: IconButton(
        color: Colors.green,
        icon : Icon(Icons.access_alarm),
        onPressed : (){
          //
        }
      ),
    )

这是输出：

您可以更改offset 属性来调整阴影的方向。

Answer 2

您可以使用 Fancy Navigation bar 如果您想要该输出，您可以通过在其标题中放置一个空文本来删除文本。

我正在使用 flutter bottomNavigatonBar 小部件，有什么可以提高的吗？

I am using flutter bottomNavigatonBar widget, Is there anything which it can be raised?

android

flutter

flutter-layout

flutter-animation