Flutter--中间打孔底部导航栏

 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: Container(
        width: 100,
        color: Colors.red,
      ),
      body: SizedBox(
        height: 300,
        child: Row(children: [
          
        ],),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton( //悬浮按钮
        child: const Icon(Icons.add),
        onPressed: () {

        }
      ),
      bottomNavigationBar: bottomNavigationBar((index) {

      }),
    );
  }


  Widget bottomNavigationBar(Function(int) onTap) {
    return BottomAppBar(
      color: Colors.white,
      shape: const CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞
      child: Row(
        children: [
          IconButton(icon: const Icon(Icons.home), onPressed: () {
            onTap(0);
          },),
          const SizedBox(), //中间位置空出
          IconButton(icon: const Icon(Icons.business), onPressed: () {
            onTap(1);
          },),
        ],
        mainAxisAlignment: MainAxisAlignment.spaceAround, //均分底部导航栏横向空间
      ),
    );
  }