I need to make a nav bar with a floating action button just like this image:
what I have been able to make is in this picture:
The problem is that I wrapped my raw in a container, added box decoration to apply gradient property to my bottom nav bar which ended up deleting the white curve of the floating action button inside the nabber. I want to be able to preserve the white curve just like in the first image and be able to apply gradient colours only to my nav bar is it possible to do so without using a box decoration?
Here's my code currently:
Widget build(BuildContext context) {
return SafeArea(child:
Scaffold(
floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
onPressed: (){
//code to execute on button press
},
child: Icon(Icons.add), //icon inside button
backgroundColor: kPrimaryColor,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//floating action button position to center
bottomNavigationBar: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
color: Colors.white,
),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: BottomAppBar( //bottom navigation bar on scaffold
color:Colors.transparent,
shape: CircularNotchedRectangle(), //shape of notch
notchMargin: 5, //notche margin between floating button and bottom appbar
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [kPrimaryColor, kPrimaryLightColor],
begin: Alignment.topLeft,
end: Alignment.topRight,
stops: [0.1, 0.8],
tileMode: TileMode.clamp,
),
),
child: Row( //children inside bottom appbar
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.home_filled, color: Colors.white,), onPressed: () {},),
IconButton(icon: Icon(Icons.check_circle, color: Colors.white,), onPressed: () {},),
IconButton(icon: Icon(Icons.analytics, color: Colors.white,), onPressed: () {},),
IconButton(icon: Icon(Icons.person, color: Colors.white,), onPressed: () {},),
],
),
),
),
)
)
) );
}
If anyone knows the answer or can help I'd be grateful.
Add this inside the BottomAppBar
clipBehavior: Clip.antiAlias,
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.