Flutter how to add margin or padding in BottomNavigationBar - flutter

I am trying to make bottom navigation bar, but with padding left and right on the screen. Right now I wrap the BottomNavigationBar with container and add padding there. The problem is the BottomNavigationBar default background still wrap all the layer, so could we remove the background color there?
Goal
Current result
bottomNavigationBar: Container(
margin: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
elevation: 0,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.local_activity), title: Text('Activity')),
BottomNavigationBarItem(
icon: Icon(Icons.inbox), title: Text('Inbox')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile')),
],
),
),
Edit: I have removed background color in scaffold and all theme, but when you have scrolled item, you could see there is still background there
Remove Scafold bg
Edit 2: here the code for the activity
class App extends StatelessWidget {
final List<Widget> _children = [
Center(
child: Container(
height: 850,
color: Colors.red,
),
)
];
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: _children[0],
bottomNavigationBar: Container(
margin: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(200), topRight: Radius.circular(200)),
),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
elevation: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.local_activity), title: Text('Activity')),
BottomNavigationBarItem(
icon: Icon(Icons.inbox), title: Text('Inbox')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile')),
],
),
),
),
);
}
}
result

You need to put the Body and the BottomNavigationBar under a Stack so that the BottomNavigationBar can be placed on top of the main body content.
Your complete code will be:
import 'package:flutter/material.dart';
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
final List<Widget> _children = [
Center(
child: Container(
height: 850, // use 'MediaQuery.of(context).size.height' to fit the screen height,
color: Colors.red,
),
)
];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Stack(
children: <Widget>[
_children[0],
Positioned(
left: 0,
right: 0,
bottom: 0,
child: bottomNavigationBar(),
),
],
),
));
}
}
Widget bottomNavigationBar() {
return Container(
margin: EdgeInsets.only(left: 16, right: 16),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(200), topRight: Radius.circular(200)),
),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
elevation: 0,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.local_activity), title: Text('Activity')),
BottomNavigationBarItem(icon: Icon(Icons.inbox), title: Text('Inbox')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Profile')),
],
),
);
}
Partial code from:
How to set border radius to bottom app bar in a flutter app?

I know it's kinda late. But this should help future viewers like me.
The icon parameter from BottomNavigationBarItem takes in a Widget. What I did is to just wrap my Icon into a Container and defined a padding.
BottomNavigationBarItem(
icon: Container(
padding: EdgeInsets.symmetric(vertical: 10),
child: Icon(
Icons.home
)
)
)

For some one is looking for solution:
You can wrap BottomNatigationBar in a Container with padding/margin properties, set same background color an set elevation of BottomNavigationBar to 0.
eg:
Container(
color: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 10),
child: BottomNavigationBar(
onTap: (index) {
controller.tabIndex.value = index;
},
backgroundColor: Colors.white,
elevation: 0,
...
}

If you came here searching for how to add a padding at the bottom of the BottomNavigationBar, here it is the solution:
Wrap the BottomNavigationBar with a MediaQuery and provide a bottom padding, this value is taken in consideration when build the bottom bar.
MediaQuery(
data: MediaQueryData(
padding: EdgeInsets.only(bottom: 10) // here is the padding
),
child: BottomNavigationBar(),
),

Related

Give Bottom navigation bar gradient color and notch transparent

I need to make the notch margin spacing (space between FAB's sides and bottomNavBar)
transparent and give my bottomNavbar a gradient color like so :
This works perfectly fine when I work with only a bottom appbar, but I need it to work with BottomNavigationBar too. For now, I've been able to keep the notch transparent, but when I add container with decoration box to give it linear gradient color the transparency disappears. This is my implementation :
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
color: Theme.of(context).primaryColor.withAlpha(255),
elevation: 0,
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.blueAccent,
onTap: (int index) {
_selectTab(pageKeys[index], index);
},
currentIndex: _selectedIndex,
elevation: 0,
backgroundColor: Theme.of(context).primaryColor.withAlpha(0),
items: [
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit_outlined,
size: 20,
color: Theme.of(context).colorScheme.onBackground),
label: 'Page 1'),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm,
size: 20,
color: Theme.of(context).colorScheme.onBackground),
label: 'Page2'),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm,
size: 20,
color: Theme.of(context).colorScheme.onBackground),
label: 'Page3'),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm,
size: 20,
color: Theme.of(context).colorScheme.onBackground),
label: 'Page4'),
],
),
),
I want to be able to give my bottomnavbar a transparent notch and a gradient color. How can I do this?
wrap your BottomAppBar with Container and with ClipRRect and remove shape parameter and apply bgcolor on BottomNavigationBar
Container(
// MediaQuery.of(context).size.height * 0.15,
decoration: const BoxDecoration(
color: Colors.white,
gradient: const LinearGradient(
colors: [
Colors.black, //define your gradient color here
Colors.grey,
]
)
),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
),
child: BottomNavigationBar(
backgroundColor: Colors.white, or Colors.transparent
)
You need extendBody: true in Scaffold. like the following example:
class SO extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
appBar: AppBar(),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Text('text text text text text text text text text text text text text text text text text text text text ');
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 12,
color: Colors.blue,
child: Container(
height: 60,
),
),
);
}
}

How do I get rid of extra BottomAppBar in Flutter?

I have extra footer BottomAppBar that I don't want to be there. I want the Bottom Navigation Bar to be nested within the Bottom App Bar because I still want to keep the notch for the Floating Action Button. The screenshot shows it clearly, as it is colored Red.
This is my code:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(0),
child: AppBar(
elevation: 0,
backgroundColor: Colors.transparent.withOpacity(0.4),
),
),
extendBodyBehindAppBar: true,
body: Container(
width: double.infinity,
height: double.infinity,
color: Colors.blue,
),
bottomNavigationBar: bottomNavBar,
floatingActionButton: addPostButton,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
Widget get bottomNavBar {
return BottomAppBar(
color: Colors.red,
shape: CircularNotchedRectangle(),
elevation: 0,
notchMargin: 10,
child: BottomNavigationBar(
elevation: 0,
items: [
BottomNavigationBarItem(
icon: Icon(MdiIcons.homeOutline),
activeIcon: Icon(MdiIcons.home),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(MdiIcons.accountOutline),
activeIcon: Icon(MdiIcons.account),
title: Text("Profile"),
),
],
),
);
}
Widget get addPostButton {
return FloatingActionButton(
focusElevation: 0,
onPressed: () {},
child: Icon(
MdiIcons.mapMarkerPlusOutline,
size: 30,
),
);
}
}
Change your code as per below then check:
Widget get bottomNavBar {
return BottomNavigationBar(
elevation: 0,
items: [
BottomNavigationBarItem(
icon: Icon(MdiIcons.homeOutline),
activeIcon: Icon(MdiIcons.home),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(MdiIcons.accountOutline),
activeIcon: Icon(MdiIcons.account),
title: Text("Profile"),
),
],
);
}

Flutter add a black outline to top of BottomNavigationBar

I am trying to figure out how to add a very subtle black line to the top of a BottomNavigationBar to make it's start more distinct from the rest of the content. AirBnb would be a good example of this.
Is there a way to achieve this with Flutter?
Below is the widget I am currently using to render the BottomNavigationBar and I have attached a sample below where there is a distinct grey line at the top of the navbar for AirBnb.
#override
Widget build(BuildContext context) {
return Scaffold(
body: currentPage,
bottomNavigationBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: Container (
decoration: BoxDecoration(
border: Border.all(color: Colors.black)
),
)
),
);
}
The parent of this Widget:
void main() => runApp(MaterialApp(
home: new MyApp(),
debugShowCheckedModeBanner: true,
));
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Navbar();
}
}
How to add line on top of bottom navigation view in flutter ?
Code
class BottomNavigationBarHandler {
Widget bar(int currentIndex) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border(top: BorderSide(color: Colors.white, width: 3.0))),
child: BottomNavigationBar(
backgroundColor: Colors.black,
selectedItemColor: Colors.pinkAccent,
unselectedItemColor: Colors.white,
showSelectedLabels: false,
showUnselectedLabels: false,
onTap: onTabTapped,
currentIndex: currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home_outlined),
title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Messages')),
BottomNavigationBarItem(
icon: Icon(Icons.add),
title: Text('Profile'))]));
}
void onTabTapped(int index) {
print('BottomNavigationBarIndex ::' + index.toString());
}
}
Output
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(200),
child: Container(
alignment: Alignment.center,
color: globals.white,
height: 100,
child: Text('imyadunandan'),
),
),
body: Container(
color: globals.white,
),
bottomNavigationBar: Container(
decoration: BoxDecoration(
color: globals.white,
boxShadow: [
BoxShadow(
color: globals.black,
),
],
),
child: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.android),
title: Text('Android'),
),
BottomNavigationBarItem(
icon: Icon(Icons.desktop_windows),
title: Text('Windows'),
),
],
backgroundColor: globals.white,
elevation: 0,
),
),
);
}
this code achieves the fallowing

Bottom navbar rounded corners

I'm trying to give some rounded corners to my bottom navbar. For that, I have to make the background of its container transparent but I don't know how.
This is what I did int the Scaffold:
bottomNavigationBar: ClipRRect(
borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0), ),
child:BottomNavigationBar(
//elevation: 0.0,
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.white10,
and the result :
There is still by default a white background. I tried to wrap my ClipRRect in a container with a transparent background but it did not work.
Any idea ?
need a little bit shadow like
bottomNavigationBar: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
boxShadow: [
BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.favorite), title: Text('Favourite')),
BottomNavigationBarItem(
icon: Icon(Icons.favorite), title: Text('Favourite'))
],
),
)
)
without shadow :
with shadow :
Inside Scaffold, set extendBody property to true. This lets body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar.
This should fix your problem.
Example:
Widget build(BuildContext context) {
return Scaffold(
body: bodyOfApp(),
extendBody: true,
backgroundColor: Colors.transparent,
bottomNavigationBar: BottomNavBar(),
);
}
All the above answers use ClipRRect in some way which is very costly computation-wise. Thus, as an alternative use Material Widget, here's how:
bottomNavigationBar: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
),
child: Material(
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
child: BottomNavigationBar(
elevation: 0,
backgroundColor: Colors.transparent,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.favorite), title: Text('Favourite')),
BottomNavigationBarItem(
icon: Icon(Icons.favorite), title: Text('Favourite'))
],
),
)),
)
Change the canvasColor in your Theme to transparent.
return MaterialApp(
theme: ThemeData(
canvasColor: Colors.transparent
),
);
class _DashBoardActivityState extends State<DashBoardActivity> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("BottomNavigationBar"),
backgroundColor: PrimaryColor,),
body: Container(child: Center(child: _widgetOptions.elementAt(_selectedIndex),),),
bottomNavigationBar: CreateBottombar(context),
);
}
final _widgetOptions = [
new ListFragScreen(),
new ConsultationFragScreen(),
new LabFragScreen(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
Container CreateBottombar(BuildContext context) {
return Container(
//add ClipRRect widget for Round Corner
child: ClipRRect(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(24),
topLeft: Radius.circular(24),
),
child: BottomNavigationBar(
//add background color
backgroundColor: PrimaryColor,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.white,
onTap: _onItemTapped,
),
),
);
}
}
The method suggested by #CoderMonk should work. If it doesn't then I think you might be using something like SafeArea() widget in the body of your Scaffold(), If so you should either remove it completely or do something like
Scaffold(
body: SafeArea(
bottom: false,
child: ...
),
);
The solution with extendBody that helps to remove the background of the bar:
#override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true, // Important: to remove background of bottom navigation (making the bar transparent doesn't help)
bottomNavigationBar: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.0), // adjust to your liking
topRight: Radius.circular(12.0), // adjust to your liking
),
color: your_bar_color, // put the color here
),
child: BottomNavigationBar(backgroundColor: Colors.transparent), // don't forget to put it
),
body: SingleChildScrollView(
child: Column(
children: [
// widget
// widget
const SizedBox(height: kBottomNavigationBarHeight) // add space at the bottom due to extendBody property for proper scrolling
],
),
),
);
}

How to set border radius to bottom app bar in a flutter app?

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),
);
}
}
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,
),
);
}
}
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.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
),
child: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: _onTabTapped,
selectedLabelStyle: TextStyle(
color: Colors.black87,
fontSize: 16,
),
iconSize: 35,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.black54,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: kBottomNavBarBgColor,
icon: Icon(Icons.home),
title: Text('Home'),
),
// more BottomNavigationBarItem() goes here.
Then plug it directly into your bottomNavigationBar
Code Example:
return Scaffold(
// more Scaffold code goes here
//bottom navigationBar
bottomNavigationBar: _getBtmNavBar(),
);
You may user bellow like .
My bottomNavigationBar image is look like
2. here is thecode
import 'package:flutter/material.dart';
class BottomTab extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _BottomTab();
}
}
class _BottomTab extends State<BottomTab> {
int _selectedTabIndex = 0;
List _pages = [
Text("Home"),
Text("Order"),
Text("Notfication"),
Text("More"),
];
_changeIndex(int index) {
setState(() {
_selectedTabIndex = index;
print("index..." + index.toString());
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('bottom nav bar'),
),
body: Center(child: _pages[_selectedTabIndex]),
bottomNavigationBar: bottomNavigationBar,
);
}
Widget get bottomNavigationBar {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30), topLeft: Radius.circular(30)),
boxShadow: [
BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: BottomNavigationBar(
currentIndex: _selectedTabIndex,
onTap: _changeIndex,
type: BottomNavigationBarType.fixed,
selectedFontSize: 12,
unselectedFontSize: 12,
selectedItemColor: Colors.amber[800],
unselectedItemColor: Colors.grey[500],
showUnselectedLabels: true,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.shopping_cart_outlined),
title: new Text('Order'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_horiz_rounded), title: Text('More')),
],
),
));
}
}
Just include the BottomNavigationBar inside the body, inside a circular border container. Like this (See the picture attached!)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage("assets/images/background.jpg"),
fit: BoxFit.cover)),
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Expanded(child: _children[_currentIndex]),
],
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0)),
boxShadow: [
BoxShadow(
offset: Offset(0.0, 1.00), //(x,y)
blurRadius: 4.00,
color: Colors.grey,
spreadRadius: 1.00),
],
),
height: 70,
child: ClipRRect(
clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0)),
child: Container(
child: BottomNavigationBar(
backgroundColor: Color.fromRGBO(255, 255, 255, 50),
showSelectedLabels: false,
showUnselectedLabels: false,
onTap: onTabTapped,
// new
currentIndex: _currentIndex,
// new
items: [
new BottomNavigationBarItem(
icon: Icon(
Icons.phone,
size: 30,
),
title: Text('Calls'),
),
new BottomNavigationBarItem(
icon: Icon(
Icons.mail,
size: 30,
),
title: Text('Messages'),
),
new BottomNavigationBarItem(
icon: Icon(
Icons.person,
size: 30,
),
title: Text('Profile'))
],
),
)),
)
],
)),
));
}