BottomNavigationBar Transparent Background

问题

I'm trying to build a BottomNavigationBar that has no background (transparent), so far this is what I have done, but I still have shadows which should also be removed:

return Scaffold(
  body: body,
  bottomNavigationBar: Theme(
    data: Theme.of(context).copyWith(
        canvasColor: Colors.transparent,
        primaryColor: Colors.white,
        textTheme: Theme
            .of(context)
            .textTheme
            .copyWith(caption: TextStyle(color: Colors.deepOrange))),
    child: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 0,
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text("Home"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.map),
          title: Text("Map"),
        )
      ],
    ),
  ),
);

回答1:

As I think if you use the transparent background then the icons will be not very clear, Alternatively you can use your custom widget like this. This may be helpful for you.

return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new Stack(children: <Widget>[
          new Container(
            color: Colors.lightGreen,
            child: new Center(
              child: new Text('Hello'),
            ),
          ),
          new Align(alignment: Alignment.bottomCenter,child: new Container(
            height: 100.0,
            child: new Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
              new Icon(Icons.home),
                new Icon(Icons.map)
            ],),
          ),)
        ],),
      ),
    );

来源：https://stackoverflow.com/questions/52126741/bottomnavigationbar-transparent-background

标签

dart

Flutter