I am having a problem putting both an app bar and bottom app bar in flutter.
I create a Scaffold and use the app bar and bottomNavigationBar properties. I use AppBar and BottomAppBar respectively. But when I run it only the bottom app bar will show and not the top app bar. What am I doing wrong? Is it even possible to have both a bottom app bar and top app bar?
It should work, maybe the child of the BottomAppBar has no height, here a working example:
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
body: Center(child: Text('Center')),
bottomNavigationBar: BottomAppBar(
color: Colors.red,
child: Container(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.home),
Icon(Icons.pause_circle_filled),
Icon(Icons.settings)
],
),
),
),
);
Related
Hy Flutters,
I have a Problem with SaveArea Widget, I would enable the bottom bar, but it cann't work for me.
here is my code i writed:
return Scaffold(
body: SafeArea(
bottom: false,
child: Stack(
alignment: Alignment.topCenter,
overflow: Overflow.visible,
children: [
NavigationBar(),
AppBody()
],
),
),
);
what should i do to get it work?
Just set the resizeToAvoidBottomInset on the scaffold to false
I need to set the navigation bar to transparent, but not hidden. As in the example of Youtube Music on the left.
I tried it in several ways, whenever I define it as transparent the bar is white.
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
systemNavigationBarColor: Colors.transparent,
systemNavigationBarDividerColor: Colors.transparent,
));
Please see the image on the right. I just need the white part to be transparent, the gesture indicator needs to remain visible.
Can someone help me?
I didn't try but I think this should work
Container(
color: Colors.black,
child: SafeArea(
child: YourWidget(),
)
)
I think you can achieve that without using SystemChrome class. One way to do it is wrap BottomNavigationBar with Theme widget and use it's canvasColor property and assignColors.transparent to it, as below:
bottomNavigationBar: Theme(
data: Theme.of(context)
.copyWith(canvasColor: Colors.transparent),
child: BottomNavigationBar(
currentIndex: 0,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home'))
],
),
),
Above will result in something like this:
In order to remove the shadow effect, use elevation property and pass 0 to it, that results in transparent navigation bar, as below:
This way if you change your scaffold's background color, the nav bar will be shown in transparent color.
Hope this answers your question
Put your navigation bar in a container.Then give no color to container it will automatically set color to transparent.To align Container to bottom you can do this.Hope this will work.
flutter
Align(
alignment: Alignment.bottomLeft,
child: Container(
width: MediaQuery.of(context).size.width,
height: 50.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
],
),
),
)
Your solution is not enough alone. You should use below way also:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,
overlays: [SystemUiOverlay.top]);
I want to make the notch margin spacing (space between FAB's sides and bottom bar) like android material design explain in Inset FAB, It looks like a zoom background text in this small visible round portion. How we can make notching space transparent to see the text behind it?
However, mine bottom bar is not showing like that
My implementation
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.white,
child: Image.asset("images/paw.png"),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Map()));
},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
color: Colors.transparent,
onPressed: () {},
),
],
),
color: Utiles.primary_bg_color,
),
body: Container(...)
You need extendBody: true in Scaffold
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,
),
),
);
}
}
BottomAppBar + BottomNavigationBar
The question title asks about BottomNavigationBar so I'm adding this answer to help people using both a BottomAppBar with a BottomNavigationBar.
If you're not using BottomNavigationBar, ignore this.
NavBar Covers Notch
By default, a BottomNavigationBar used as a child inside a BottomAppBar, will cover the notch like so:
We need to remove its color & shadow to let the notch show.
Using BottomNavigationBar in BottomAppBar
To keep the notch visible...
BottomNavigationBar needs:
a backgroundColor specified, with 0 alpha (completely transparent)
otherwise, the default onBackground theme color is used, covering the notch
elevation: 0 to remove an ugly shadow under BottomNavigationBar
the transparent backgroundColor makes the shadow visible & horrendous
BottomAppBar needs:
shape: CircularNotchedRectangle() obviously, to have a notch for the FAB
elevation: 0 to remove a slight shadow under the notched FAB (barely visible)
Scaffold needs:
extendBody: true to allow body content to flow underneath notched FAB
SafeArea needs:
if using SafeArea, use bottom:false arg, so our body can flow below past the BottomNavigationBar, under the FAB
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
extendBody: true, // CRITICAL for body flowing under FAB
body: SafeArea(
child: Center(
child: Container(
color: Colors.greenAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
),
bottom: false,
// ↑ SafeArea(bottom:false) allows Scaffold body:+extendBody: to hit bottom edge
),
// ↓ Location: centerDocked positions notched FAB in center of BottomAppBar ↓
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
bottomNavigationBar: BottomAppBar( // ****** APP BAR ******************
clipBehavior: Clip.antiAlias,
shape: CircularNotchedRectangle(), // ← carves notch for FAB in BottomAppBar
color: Theme.of(context).primaryColor.withAlpha(255),
// ↑ use .withAlpha(0) to debug/peek underneath ↑ BottomAppBar
elevation: 0, // ← removes slight shadow under FAB, hardly noticeable
// ↑ default elevation is 8. Peek it by setting color ↑ alpha to 0
child: BottomNavigationBar( // ***** NAVBAR *************************
elevation: 0, // 0 removes ugly rectangular NavBar shadow
// CRITICAL ↓ a solid color here destroys FAB notch. Use alpha 0!
backgroundColor: Theme.of(context).primaryColor.withAlpha(0),
// ====================== END OF INTERESTING STUFF =================
selectedItemColor: Theme.of(context).colorScheme.onSurface,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit_outlined,
size: 40,
color: Theme.of(context).colorScheme.onBackground),
label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.access_alarm,
size: 40,
color: Theme.of(context).colorScheme.onBackground),
label: 'Edit')
],
),
),
);
Result
With the above pieces in place you should see something like this:
Use, extendBody: true
From the docs,
extendBody: true ensures that that scaffold's body will be visible through the bottom navigation bar's notch
Do:
return Scaffold(
extendBody: true,
(...)
after
body: SafeArea(
bottom: false,
(...)
after "no add backgroundColor"
BottomNavigationBar(
//backgroundColor:
If you use safe Area ,then extended Body and probably other methods doesn't work. So set the safe Area to (false).
I have used SilverAppBar but don't know how to add a drawer to it. I just want an app bar with a drawer that hides on scrolling
Note that the Scaffold takes care of all of the major behavior associated with Material design.
If you add the drawer field to your Scaffold, it will automatically add a hamburger menu icon to the left hand side of your SilverAppBar in flutter.
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Drawer - Sliver AppBar'),
)],
),
drawer: Drawer(
child: Column(
children: <Widget>[
DrawerHeader(
child: Text(' I am Drawer'),
curve: SawTooth(12),
),
],
),
),
);
}
I need a layout without an appbar, so the most obvious approach is to just leave out the appbar tag on the Scaffold but if I do that the content goes underneath the status bar like this:
As you can see my container which is colored in blue starts right from underneath the status bar which shouldn't be the case, so I had to manually set the margin of the container which is not so nice, this is the results:
I have this feeling that devices might have status bars with varying heights so setting my top margin to fixed size might not render properly on other devices. Is there a way for flutter to position my content automatically below the status like it positions the AppBar nicely below the status bar.
Here is my scaffold code:
return new Scaffold(
body: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new HeaderLayout(),
],
),
);
This is my header container:
class HeaderLayout extends StatelessWidget{
#override
Widget build(BuildContext context) {
return new Container(
color: Colors.blue,
margin: const EdgeInsets.only(top: 30.0),
child: new SizedBox(
height: 80.0,
child: new Center(
child: new Text(
"Recommended Courses",
style: new TextStyle(color: Colors.white),
),
),
)
);
}
}
Wrap your Column with SafeArea
body: new SafeArea(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new HeaderLayout(),
],
)
) ,
SafeArea is a widget that insets its child by sufficient padding to avoid intrusions by the operating system.
For example, this will indent the child by enough to avoid the status bar at the top of the screen.
You can get the OS padding with MediaQuery.
You'd have to replace your
margin: const EdgeInsets.only(top: 30.0),
by
margin: MediaQuery.of(context).padding,
Another solution is to wrap your content inside a SafeArea. Which basically does the same thing.
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}