I want to set the borderRadius to an Bottom Navigation App Bar as its shown in the image. I have tried to put Bottom Navigation App Bar to a ClipRRect borderRadius and in a Container decoration but it didn't worked. So how can I apply the topLeft, and topRight border radius to my bottom navigation bar. Kindly help to let me know how can I do it?
main.dart
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Food Ordering',
theme: ThemeData(primarySwatch: Colors.blue, primaryColor: Colors.white),
home: MyStatefulWidget(),
routes: <String, WidgetBuilder>{
'/detail-page': (BuildContext context) => MyDetailPage(),
},
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static List<Widget> _widgetOptions = <Widget>[
HomePage(),
HomePage(),
HomePage(),
HomePage(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Image.asset('assets/icon-home.png'),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Image.asset('assets/icon-mentors.png'),
title: Text('Mentors'),
),
BottomNavigationBarItem(
icon: Image.asset('assets/icon-messages.png'),
title: Text('Messages'),
),
BottomNavigationBarItem(
icon: Image.asset('assets/icon-settings.png'),
title: Text('Settings'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped),
);
}
}
Answers 2 : of How to set border radius to bottom app bar in a flutter app. Alternatively, if your goal is to only put a borderRadius you can just use ClipRRect and apply your desired borderRadius to it. Here is my implementation of the solution: ClipRRect _getBtmNavBar() { return ClipRRect( borderRadius: BorderRadius.
There is one simple way to achieve this using ClipPath Widget. Create A SizedBox/Container of some height (say 240) right below AppBar in the body and apply the same background color. Use ClipPath Widget to wrap that SizedBox/Container. Change your heights fraction, we kept heights-50 for a nice curve you want.
Now let's create our bottom navigation bar. In the HomePage class let's define the bottomNavigationBar attribute and assign a Container to it. Give it a height of 60 with some BoxDecoration (Pixels) add a Row as the child of the Container. Set the main axis alignment to space around.
EDIT
Scaffold now has a property called extendBody
which can be used to extend the body below a bottomBar. From the documentation,
If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons.
This means that all you need to do is
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Some Text'),
),
body: bodyContent,
extendBody: true,
bottomNavigationBar: bottomNavigationBar,
);
}
Widget get bodyContent {
return Container(color: Colors.red);
}
Widget get bottomNavigationBar {
return ClipRRect(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
child: BottomNavigationBar(
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: '1'),
BottomNavigationBarItem(icon: Icon(Icons.usb), label: '2'),
BottomNavigationBarItem(
icon: Icon(Icons.assignment_ind), label: '3'),
BottomNavigationBarItem(
icon: Icon(Icons.multiline_chart), label: '4'),
],
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.black,
showUnselectedLabels: true,
),
);
}
}
OUTDATED
Put it inside a stack. Don't add the Bottom Navigation Bar to the scaffold directly.
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Some Text'),
),
body: Stack(
children: <Widget>[
bodyContent,
Positioned(
left: 0,
right: 0,
bottom: 0,
child: bottomNavigationBar,
),
],
),
);
}
Widget get bodyContent {
return Container(color: Colors.red);
}
Widget get bottomNavigationBar {
return ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('1')),
BottomNavigationBarItem(icon: Icon(Icons.usb), title: Text('2')),
BottomNavigationBarItem(
icon: Icon(Icons.assignment_ind), title: Text('3')),
BottomNavigationBarItem(
icon: Icon(Icons.multiline_chart), title: Text('4')),
],
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.black,
showUnselectedLabels: true,
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With