I am trying to implement the below design
When I add the expandable floating button to the notch in bottom navigation bar it break the design of bottom navigation bar.
I tried AnchorOverlay but didn't help. Below is the code of my main screen where the expandable widget is notched in the bottom app bar
@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>[
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: () {},
),
],
),
),
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.