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
Related
I want to implement navigation drawer in flutter like this screenshot. But don't know how.
Please give me some code hint.
Thank you.
This is the image I like to archive
use the Drawer Widget in scaffold
this is an example from the official documentation
Scaffold(
appBar: AppBar(
title: const Text('Drawer Demo'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: const <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Drawer Header',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.message),
title: Text('Messages'),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Profile'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
),
],
),
),
);
this is the result =>
You have to use the Drawer widget.
Scaffold(
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
ListTile(
title: const Text('Item 1'),
onTap: (){
// do something
},
),
ListTile(
title: const Text('Item 2'),
onTap: (){
// do something
},
),
],
),
),
...
And that's pretty much it! Learn more about Drawer, here.
An easy to archive this is using another Scaffold on body and using drawer there. And to control the drawer use ScaffoldState GlobalKey.
Result
Widget
class _MyApp extends StatefulWidget {
#override
State<_MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<_MyApp> {
static final GlobalKey<ScaffoldState> _key = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {
if (_key.currentState != null) {
if (_key.currentState!.isDrawerOpen) {
Navigator.pop(_key.currentContext!);
} else {
_key.currentState!.openDrawer();
}
}
},
icon: const Icon(
Icons.more,
),
),
),
body: Scaffold(
key: _key,
drawer: Drawer(
child: Container(
color: Colors.red,
),
),
body: Column(
children: const [
Text("Child"),
],
),
));
}
}
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 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"),
),
],
);
}
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 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