Flutter: Custom Bottom Navigation Bar Cut Radius
1,438
for bottomNavigationBar :
You can set the Scaffold's extendBody
property to true
for AppBar:
You can set the Scaffold's extendBodyBehindAppBar
property to true
![Muhammet Ömer](https://i.stack.imgur.com/Nu2Lp.jpg?s=256&g=1)
Author by
Muhammet Ömer
Hi from Turkey. I am Muhammet Omer. I'm studying Computer Science at Sakarya University. I am Flutter developer.
Updated on December 20, 2022Comments
-
Muhammet Ömer over 1 year
I want to cut the parts with radius from custom bottom navigation bar just like in design :
But the code works like this :
This is my code :
// home_page.dart // bottomNavigationBar: CustomBottomNavigationBar(), // custom_bnb.dart // @override Widget build(BuildContext context) { return Container( decoration: _buildBoxDecoration, child: ClipRRect( borderRadius: AppBorderRadius.bottomBarRadius, child: Container( height: 80, decoration: _buildBoxDecoration, child: Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ BottomBarItem(iconData: AppIcons.location, title: AppStrings.location), BottomBarItem(iconData: AppIcons.home, title: AppStrings.homePage), BottomBarItem(iconData: AppIcons.settings, title: AppStrings.settings), ], ), ), ), ); } BoxDecoration get _buildBoxDecoration => BoxDecoration(color: Theme.of(context).cardColor, borderRadius: AppBorderRadius.bottomBarRadius, boxShadow: [AppBoxShadow.materialShadow]); // app_border_radius.dart // static BorderRadius get bottomBarRadius => BorderRadius.vertical(top: Radius.circular(50));
I tried clipBehavior property in all of container
How can I solve this problem?
Thank you.