我正在尝试实现以下设计
当我将可扩展浮动按钮添加到底部导航栏的凹口时,它破坏了底部导航栏的设计。
我尝试了 AnchorOverlay 但没有帮助。下面是我的主屏幕的代码,其中可扩展小部件在底部应用程序栏中有凹口
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kPrimaryColor,
floatingActionButton: ExpandableFab(
distance: 112.0,
children: [
ActionButton(
onPressed: () {},
icon: const Icon(Icons.format_size),
),
ActionButton(
onPressed: () {},
icon: const Icon(Icons.insert_photo),
),
ActionButton(
onPressed: () {},
icon: const Icon(Icons.videocam),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
//bottom navigation bar on scaffold
color: Colors.redAccent,
shape: const CircularNotchedRectangle(), //shape of notch
notchMargin:
5, //notche margin between floating button and bottom appbar
child: Row(
//children inside bottom appbar
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
//IconButtons
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.print,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.people,
color: Colors.white,
),
onPressed: () {},
),
],
),
),
);
}