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"),
),
],
);
}
Related
enter image description here
I want to make this type of bottom navigation bar, can anyone help?
You can dock your FloatingActionButton using the floatingActionButtonLocation property of Scaffold.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: const Center(child: const Text('asdfasdfasdf')),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: Container(
margin: const EdgeInsets.only(right: 55),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: 5),
),
child: FloatingActionButton(
onPressed: () {},
elevation: 0,
backgroundColor: Colors.red,
child: const Icon(Icons.star_purple500_sharp),
),
),
bottomNavigationBar: BottomNavigationBar(
onTap: (int i) {},
backgroundColor: Colors.red,
currentIndex: 0,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: const Icon(Icons.headset_mic_rounded),
label: '',
),
BottomNavigationBarItem(
icon: const Icon(Icons.headset_mic_rounded),
label: '',
),
BottomNavigationBarItem(
icon: const Icon(Icons.headset_mic_rounded),
label: '',
),
BottomNavigationBarItem(
icon: const Icon(Icons.headset_mic_rounded),
label: '',
),
],
),
),
);
}
}
You can try curved_navigation_bar package in bottomNavigationBar.
I want to apply elevation in the bottom navigation bar. I tried elevation property but it doesn't work. Elevation property has a very negligible shadow effect. But according to my design I want higher elevation.
I want the following output...
'
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Sample App'),
),
bottomNavigationBar: BottomNavigationBar(
elevation: 10,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
title: Text('Test')
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
title: Text('Test')
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
title: Text('Test'),
),
],
),
);
}
}
I know it may not seem the best solution for this issue but you can wrap your Bottom Nav Bar inside a Container, and then apply a BoxDecoration on that.
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Sample App'),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black,
blurRadius: 10,
),
],
),
child: BottomNavigationBar(
elevation: 10,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
title: Text('Test'),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
title: Text('Test'),
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
title: Text('Test'),
),
],
),
),
);
}
}
I hope someone come with a better solution for this issue.
I'm pretty late, but I got the perfect answer.
You can use a BottomAppBar instead of the BottomNavigationBar
Ex :
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Sample App'),
),
bottomNavigationBar: BottomAppBar(
elevation: 10,
child: Row(children :[
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
title: Text('Test')
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
title: Text('Test')
),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
title: Text('Test'),
),
]),
),
);
}
}
happy fluttering ! :)
elevation property
If null, defaults to 8.0.
final double elevation
Guys!
I am trying to make this AppBar transparent. Because behind it will have a background but so far I have not had success. I thank you all thank you!
class _HomePageState extends State<HomePage> {
int index = 0;
Widget build(BuildContext context) {
return Scaffold(
body: show(index),
appBar: AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: (){},
)
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.grey[900],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: index,
showUnselectedLabels: true,
unselectedItemColor: Colors.white54,
selectedItemColor: Colors.white,
onTap: ((int x) {
setState(() {
index = x;
});
}),
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Home")),
new BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text("Library")),
],
),
),
);
}
}
enter image description here
Appbar has shadow by default and if u want transparent appbar, also you need to add elevation: 0 to AppBar for remove shadow.
Get hint from following code (source https://mrflutter.com/fullscreen-page-with-transparent-appbar-in-flutter/)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
fit: BoxFit.cover,
),
),
child: Center(
child: Text(
'mrflutter.com',
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
),
),
Positioned(
child: AppBar(
title: Text("Transparent AppBar"),
backgroundColor: Colors.transparent,
elevation: 0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.share),
onPressed: () {},
tooltip: 'Share',
),
],
),
)
],
),
);
}
try to wrap both AppBar and your Body part in stack and make AppBar Trasparent so you will get your desired Output
class _HomePageState extends State<HomePage> {
int index = 0;
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
show(index),
Wrap(
children: <Widget>[
AppBar(
backgroundColor: Colors.transparent,
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
)
],
),
],
),
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.grey[900],
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: index,
showUnselectedLabels: true,
unselectedItemColor: Colors.white54,
selectedItemColor: Colors.white,
onTap: ((int x) {
setState(() {
index = x;
});
}),
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text("Home")),
new BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
new BottomNavigationBarItem(
icon: Icon(Icons.library_music), title: Text("Library")),
],
),
),
);
}
}
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 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