After rounding the corners of my navigation bar I noticed there's still something there. When I set the scaffolds background color to transparent, what's behind my navigation bar is black.. if I change it to blue, it's blue.. So is it the scaffold? How do I get it to show my home page behind it? I'm new at this...
class Navigation extends StatefulWidget {
#override
_NavigationState createState() => _NavigationState();
}
class _NavigationState extends State<Navigation> {
int _selectedIndex = 0;
List<Widget> _widgetOptions = <Widget>[
Home(),
Options(),
Menu(),
Search (),
Text ('Profile')
];
void _onItemTap(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Stack (
children: [_widgetOptions.elementAt(_selectedIndex)],
),
bottomNavigationBar: Container(
margin: EdgeInsets.zero,
decoration: BoxDecoration(
color: Color (0xFF213359),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),),),
child: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
showUnselectedLabels: false,
showSelectedLabels: false,
type: BottomNavigationBarType.fixed,
elevation: 0,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(MyFlutterAppHouse.sketch_house,
size: 27.5,), label: (''),),
BottomNavigationBarItem(
icon: Icon(MyFlutterAppOptionsLong.sketch_options_long,
size: 35), label: (''),),
BottomNavigationBarItem(
icon: Icon((MyFlutterAppBook.sketch_book),
size: 34, ), label: (''),),
BottomNavigationBarItem(
icon: Icon(MyFlutterAppSearch.sketch_search,
size: 34), label: (''),),
BottomNavigationBarItem(
icon: Icon(MyFlutterAppPerson.sketch_person,
size: 30.5), label: (''),),
],
currentIndex: _selectedIndex,
onTap: _onItemTap,
unselectedItemColor: Colors.grey[600],
selectedItemColor: Colors.white,
),
),
),
);
}
}
yes it is the scaffold once its transparent you see the material app which is black ,
one you put color back it appears , it is that simple.
and if you want to see your home page from the radius gap you can add extendBody property to your scaffold
extendBody: true,
Related
class HomeView extends GetView<HomeController> {
#override
final HomeController controller = Get.put(HomeController());
buildNavBar() {
return Obx(
() => BottomAppBar(
shape: const CircularNotchedRectangle(),
color: MyColorStyle.primary,
notchMargin: 4,
clipBehavior: Clip.antiAlias,
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
iconSize: 30.0,
showSelectedLabels: false,
showUnselectedLabels: false,
selectedItemColor: MyColorStyle.primary,
unselectedItemColor: Colors.grey[600],
onTap: controller.changeTabIndex,
currentIndex: controller.tabIndex.value,
backgroundColor: Colors.white,
items: const [
BottomNavigationBarItem(icon: Icon(Icons.dashboard), label: ''),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today), label: ''),
BottomNavigationBarItem(icon: Icon(Icons.show_chart), label: ''),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: ''),
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
extendBody: true,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: MyColorStyle.primary,
elevation: 2,
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) => ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(40), topRight: Radius.circular(40)),
child: SizedBox(
height: Get.height * 0.8,
child: Container(),
),
),
);
},
child: const Icon(Icons.add),
),
bottomNavigationBar: buildNavBar(),
body: Obx(
() => IndexedStack(
index: controller.tabIndex.value,
children: [
SizedBox(),
SizedBox(),
SizedBox(),
SizedBox(),
],
),
),
);
}
}
image here(blue space)
I tried solving it with SafeArea. I can't remove the space at the bottom. None of the methods have achieved the solution I wanted.
When I made a BottomNavBar like this a while ago, there was no auto-space for the home indicator. For this, I couldn't reach a property in Scaffold or anywhere else.
That is the gesture system navigation bar, which depends on the user's phone settings. You cannot remove but you can change the color. In the main method, before calling runApp(),
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
systemNavigationBarColor: appWhite,
systemNavigationBarDividerColor: appWhite,
systemNavigationBarIconBrightness: Brightness.dark));
runApp(const App());
}
I couldn't remove the space at the bottom, but I wrapped my Scaffold with SafeArea. I made the color of the space the same as my page by wrapping the SafeArea in the Container and giving the Container a white color. Sayfamın başlangıcı bu şekilde oldu.
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: SafeArea(
child: Scaffold(
I want to navigate between my pages, when I'm on the settings page I want a back button that takes me to the home page and the same for the favorites, from my pages there is also a bottom navigation bar that allows you to navigate between them. I have already tried with the Navigator() but it forces me to put another button on the home page. I don't know if I made myself clear, but I hope you can help me.
Thank you!
Update : I have used getX 's package.
If the settings page doesn't include the bottom app bar, then you can use Navigator.of(context).pop() or you can use a top app bar and set automaticallyImplyLeading = true to display a back button which also pops.
Here is a example of one of my bottom app bars which allows smooth navigation across multiple pages:
class _MainScreenState extends State<MainScreen> {
int _currentIndex = 0;
final List<Widget> _children = [
Home(),
InboxMain(),
DashboardMain(),
ProfileMain(),
FriendsMain()
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: _children[_currentIndex],
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
canvasColor: Color.fromRGBO(41, 34, 78, 1),
), //
child: BottomNavigationBar(
//selectedItemColor: Colors.red,
//selectedIconTheme: IconThemeData(color: Colors.red),
type: BottomNavigationBarType.fixed,
showSelectedLabels: false,
showUnselectedLabels: false,
backgroundColor: Color.fromRGBO(41, 34, 78, 1),
onTap: onTabTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: _currentIndex == 0
? Icon(Icons.home_outlined, color: Colors.white)
: Icon(
Icons.home_outlined,
color: Colors.grey[600],
),
title: Container(
height: 0,
)),
BottomNavigationBarItem(
icon: _currentIndex == 1
? Icon(
Icons.email_outlined,
color: Colors.white,
)
: Icon(
Icons.email_outlined,
color: Colors.grey[600],
),
title: Container(
height: 0,
)),
BottomNavigationBarItem(
icon: _currentIndex == 2
? Icon(Icons.dashboard, color: Colors.white)
: Icon(Icons.dashboard, color: Colors.grey[600]),
title: Container(
height: 0,
)),
BottomNavigationBarItem(
icon: _currentIndex == 3
? Icon(
Icons.person,
color: Colors.white,
)
: Icon(Icons.person, color: Colors.grey[600]),
title: Container(
height: 0,
)),
BottomNavigationBarItem(
icon: _currentIndex == 4
? Icon(
Icons.people_alt,
color: Colors.white,
)
: Icon(Icons.people_alt, color: Colors.grey[600]),
title: Container(
height: 0,
)),
],
),
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
My app (once logged in) navigates to this, and all navigation is controlled here, other than extended screens which I use a back button and pop().
I want to add a colored BorderSide to the top of my BottomNavigationBar.
I can achieve it using a Custom BottomAppBar, but it is not convenient for my design as it misplaces my floatingActionButtonLocation.centerDocked, so I need to stick with BottomNavigationBar.
Any help to find a workaround is appreciated.
import 'package:flutter/material.dart';
class BottomNavTest extends StatefulWidget {
#override
_BottomNavTestState createState() => _BottomNavTestState();
}
class _BottomNavTestState extends State<BottomNavTest> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.black, //
currentIndex: 0,
onTap: (index) {
switch (index) {
case 0:
break;
case 1:
break;
}
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.thumb_up),
title: Text('good'),
),
BottomNavigationBarItem(
icon: Icon(Icons.thumb_down),
title: Text('bad'),
),
],
),
);
}
}
Current output:
My goal:
Add it inside the container and give border
Scaffold(
backgroundColor: Colors.grey,
bottomNavigationBar: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2)
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.black,
currentIndex: 0,
onTap: (index) {
switch (index) {
case 0:
break;
case 1:
break;
}
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.thumb_up),
title: Text('good'),
),
BottomNavigationBarItem(
icon: Icon(Icons.thumb_down),
title: Text('bad'),
),
],
),
),
);
Output:
You can make BottomNavigationBar as a child to the Container..
And add topBorder to Container like this..
decoration: BoxDecoration( border: Border( top: BorderSide( color: Colors.blue, // width: 3.0 --> you can set a custom width too! ), ), ),
hope it solves your issue
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(),
),
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'))
],
),
)),
)
],
)),
));
}