Flutter实现底部菜单栏中间托起、凸起、缺口效果

根据B站技术胖大佬的视频敲的，感谢大佬。

main.dart中，注意home后面的BottomAppBarDemo，为引入的底部菜单栏

void main() =>runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightBlue
      ),
      home: BottomAppBarDemo(),
    );
  }
}

新建一个bottom_appbar_demo.dart

class BottomAppBarDemo extends StatefulWidget {
  @override
  _BottomAppBarDemoState createState() => new _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State {
  List _eachView;
  int _index = 0;

  @override
  void initState() {
    _eachView = List();
    _eachView..add(EachView("Home"))..add(EachView("Head"));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context)
              .push(MaterialPageRoute(builder: (BuildContext context) {
            return EachView("new Page");
          }));
        },
        tooltip: "bigHead",
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      //放置位置 中间的缺口处
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        //CircularNotchedRectangle 意思是一个带有圆形缺口的矩形
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          //将主轴空白区域均分，使各个子控件间距相等
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: Icon(Icons.home, color: Colors.white),
              onPressed: () {
                setState(() {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (BuildContext context) {
                    return EachView("Home");
                  }));
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.access_alarm, color: Colors.white),
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (BuildContext context) {
                  return EachView("Home");
                }));
              },
            )
          ],
        ),
      ),
    );
  }
}

关键地方都有注释，当点击底部菜单栏item的时候，需要跳转到不同页面，此时新建一个each_view.dart

class EachView extends StatefulWidget {
  String _title;

  EachView(this._title);

  @override
  _EachViewState createState() => new _EachViewState();
}

class _EachViewState extends State {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(title:Text(widget._title)),
      body: Center(child: Text(widget._title)),
    );
  }
}