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]);
Related
I'm using SafeArea to display a bottom navigation bar :
SafeArea(
child: ScaffoldMessenger(
child: Scaffold(
body: _tabs[index],
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Theme.of(context).primaryColor,
unselectedItemColor: Colors.grey,
showUnselectedLabels: true,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today), label: "Agenda"),
BottomNavigationBarItem(
icon: Icon(Icons.people), label: "Patients"),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance_wallet), label: "Comptes"),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: "Réglages"),
],
currentIndex: index,
onTap: (i) => context.read(navigationIndexProvider).index = i,
),
),
),
);
When bookmarked on iphone desktop, the safe area does not prevent the notch from overlapping the bottom navbar.
Here is the result :
How to properly prevent notch from overlapping the bottom bar ?
In SAFEAREA widget there is an argument -bottom
Set this bottom either true or false.
SafeArea(
bottom:true,
child:ScaffoldMessanger()
)
I don't remember the correct one, you can check both and let us know which one works for you.
I think since you're using bottomNavigationBar, the SafeArea should not be wrapped around Scaffold. It should be wrapped by Scaffold like this:
Scaffold(
body: SafeArea(child:
_tabs[index] ...
I think you should only wrap Scaffold with SafeArea when you're not using any kind of bottomNavigationBar
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)
],
),
),
),
);
Just noticed that ListTile cover button animation when wrapped inside a container with background color set to anything but transparent. Wrapping ListTile in a container with set color is the only way I know to change background color of ListTile. Is there any other way to change background color of the ListTile without loosing button animation?
Container(
color: Colors.green,
child: ListTile(
title: Text('Test'),
trailing: IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
),
)
OUTPUT
This is because of the way InkWell works (Some buttons, like the IconButton, use InkWell or InkResponse as their parent). You can read about it more on this github issue page.
In order to make that ripple effect to display on top of the decorated Container (the green one in your code) - it needs a Material widget above the Container in the widget display tree.
So you should edit the code and add a Material widget with transparency in your Container, so the widget display tree will look like Container -> Material -> Ink.
Container(
color: Colors.green,
child: Material(
type: MaterialType.transparency,
child: ListTile(
title: Text('Test'),
trailing: IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
),
),
),
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 am trying to create an effect on the Bottom Navigation Bar such as that of Google Drive. I want the title of the item only to be displayed, on the selected item, and the others to only display the icons.
Also, this bottom bar becomes somewhat transparent, so you can barely see what's under it. Is this possible to do in flutter? I know it is not possible on the main app bar, since there is an issue talking about it here
image for reference
Hide Title of Unselected BottomNavigationBarItem
You just need to set the show unselected labels property of the bottom navigation bar to false
showUnselectedLabels: false,
Transparent BottomNavigation bar
The Scaffold provides placeholders for both Appbar and BottomNavigation bars. This is how they are placed.
The problem here is that the body does not overlap the Appbar or the BottomNavigation bar, and thus even if you give transparent background it would appear to do nothing.
A workaround would be to put the Body, AppBar and BottomNavigationBar inside a stack and position the AppBar and BottomNavigationBar appropriately.
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
color: Colors.green, // Content of body here
),
Positioned(
left: 0,
right: 0,
top: 0,
child: AppBar(
elevation: 0,
backgroundColor: Colors.indigo.withAlpha(80),
title: Text('Some Text'),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: BottomNavigationBar(
elevation: 0,
showUnselectedLabels: false,
backgroundColor: Colors.red.withAlpha(80),
items: [
BottomNavigationBarItem(
title: Text('A'),
icon: Icon(Icons.add),
),
BottomNavigationBarItem(
title: Text('B'),
icon: Icon(Icons.remove),
),
],
),
),
],
),
);
}
}
U should use this code :
bottomNavigationBar: BottomNavigationBar(
//use both properties
type: BottomNavigationBarType.fixed,
showUnselectedLabels: true,
//-----------
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.icon1),
label:'item 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.icon2),
label: 'item 2',
),
],
)