My app doesn't use AppBar, and the content is overlapping with status bar when scrolled. I tried using AnnotatedRegion<SystemUiOverlayStyle>, however it doesn't change anything.
Overlapped
My best try is using SafeArea, however it turned Status Bar to grey.
Grey Safe Area
Is there a way to maintain the automatic color of status bar, without it overlapping with the content?
Additional Note:
Flutter 1.17.5
My Tree
SafeArea
|_ SingleChildScrollView
|_ Column
|_ Container
|_ Container
|_ Container
EDIT: I just realized the automatic color (status bar follow the first container's color) was because it was transparent. I was thinking of making it solid on runtime, and read it from the first colored widget.
import 'package:flutter/services.dart';
#override
Widget build(BuildContext context){
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.blue, //or the color you prefer
),
child: SafeArea(child: Scaffold(...)),
);
}
You need to wrap your SafeArea widget with Container widget to change the color of the SafeArea widget
SAMPLE CODE
Scaffold(
backgroundColor: Colors.white,
body: Container(
color: Colors.red, /* Set your status bar color here */
child: SafeArea(
child: Container(
/* Add your Widget here */
)),
),
);
Another way You can use AppBar
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.red,
),
body: Container(
child: //widget
)
);
}
How to make a translucent appbar with flutter?
I need to create an app bar but I do not know where to start.
exemple:
Image
Here's how to make a scaffold layout with a translucent app bar:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class TranslucentExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
// Overrides the standard translucent status bar.
statusBarColor: Colors.transparent,
),
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black12,
// Remove any elevation to avoid seeing a shadow underneath the translucent material of the app bar.
elevation: 0.0,
title: Text('Photo frame'),
action: <Widget>[
IconButton(
icon: Icon(Icons.settings),
tooltip: 'Settings',
onPressed: () => print('something'),
),
],
),
// You might have to change the fit of the image to make it 'full screen'.
body: Image.network('url.to/image'),
),
);
}
}
Unfortunately it isn't possible to fully recreate the screenshot you provided since it currently isn't possible to have a transparent or translucent navigation bar on Android with Flutter apps.
Only add extendBodyBehindAppBar: true,
like:
return Scaffold(
appBar: AppBar(
title: Text("Photo"),
backgroundColor: Colors.black12,
),
extendBodyBehindAppBar: true,
body: Container(),
);
I am trying to add SafeArea widget for the flutter app with colorized system bars but somehow they are always turning black.
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.light.copyWith(
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarColor: kSurfaceColor,
statusBarIconBrightness: Brightness.dark,
statusBarColor: Colors.red, // Note RED here
),
);
return SafeArea(
child: Scaffold(
backgroundColor: kWhiteColor,
appBar: _buildAppBar(context), // Title and Avatar are built here
body: _buildBody(), // This function just returns blank Container for now
floatingActionButton: _buildFAB(context),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
),
);
}
This is what I see
If I wrap SafeArea inside a Container with color property set to white, it works but system bar icons also turn white
Building on #david-carrilho's answer, I created this simple widget
import 'package:flutter/material.dart';
class ColoredSafeArea extends StatelessWidget {
final Widget child;
final Color color;
const ColoredSafeArea({Key key, #required this.child, this.color})
: super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: color ?? Theme.of(context).colorScheme.primaryVariant,
child: SafeArea(
child: child,
),
);
}
}
Then wherever I would use a SafeArea, I use my little wrapper widget ColoredSafeArea.
class MyExampleView extends StatelessWidget {
const MyExampleView({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ColoredSafeArea(
child: Center(
child: Text('Nice color bar'),
),
);
}
}
The reason why this works is because it creates a container behind your content with the specified color, then SafeArea simply adds the necessary padding based on the device.
Container(
color ...
),
child: SafeArea(
child: Scaffold(
body:
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: ...
I know this is an old question, but after reading the documentation I came up with a more complete solution.
My answer considers the following:
Don't wrap Scaffolds into SafeAreas;
[iOS] paint your Scaffold the right Color;
[Android] set the System Bars programmatically.
1. Proper use of SafeArea
SafeArea is a widget that performs a MediaQuery to add some proper padding to your application. This should happen inside the body of your Scaffold application. Something like this will lead to code that won't unexpectedly break later on:
return Scaffold(
// ...
body: SafeArea( // your SafeArea should stay here
child: YourWidget(),
),
);
2. iOS Notch
As other answers said already, you just have to paint your Scaffold so that you'll get the color you want. Your Scaffold should include a backgroundColor property (and your AppBar too, if you have one).
return Scaffold(
// ...
backgroundColor: yourColor, // the RED you need
appBar: AppBar( // if any
backgroundColor: yourColor, // maybe RED here, also
// a system overlay option is included here, too, see 3.
// ...
),
body: SafeArea( // your SafeArea should stay here
child: YourWidget(),
),
);
3. Android SystemUI
As OP did, you need SystemChrome.setSystemUIOverlayStyle() to address Android-related system bar paints.
However, the documentation says that this method should be called programmatically whenever a new page / a new route is being popped or pushed, if you have different Route colors.
Suppose you have a 2.0 Router; then, you would write its build method as it follows:
Widget build(BuildContext context) {
Color overlayColor = ... your color ...;
final systemBarColors = SystemUiOverlayStyle(
systemNavigationBarColor: overlayColor,
statusBarColor: overlayColor,
);
SystemChrome.setSystemUIOverlayStyle(systemBarColors);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: systemBarColors,
child: Navigator(
key: navigatorKey,
pages: _stack,
onPopPage: _onPopPage,
),
);
}
This will ensure that every time a new page is popped or pushed, i.e. the build method of our Router is called, the Android system bar and status bar are properly painted.
For your case just wrapping SafeArea() to the top widget that will be DISPLAYED on the screen(example: your 'Today' text widget) should avoid the black color on system bar.
Full example.
Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SafeArea(
child: Text('Today'),
),
Text('Tomorrow')
]
);
This worked for me!
Replace your Overlay style with below code it will work
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.white));
set only main class
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.light.copyWith(
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.white,
statusBarIconBrightness: Brightness.light,
statusBarColor: HexColor(HexColor.primarycolor), // Note RED here
),
);
my Example code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:loader_overlay/loader_overlay.dart';
import 'HexColor.dart';
class CityListActiviy extends StatefulWidget {
// Initially password is obscure
#override
State<CityListActiviy> createState() => _CityListActiviyState();
}
class _CityListActiviyState extends State<CityListActiviy> {
TextEditingController userid_Controller = new TextEditingController();
bool userid_validate = false;
final String requiredNumber = '123456';
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.light.copyWith(
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.white,
statusBarIconBrightness: Brightness.light,
statusBarColor: HexColor(HexColor.primarycolor), // Note RED here
),
);
return MaterialApp(
debugShowCheckedModeBanner: true,
home: LoaderOverlay(
child:SafeArea(
child: Scaffold(
backgroundColor: HexColor(HexColor.gray_activity_background),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Stack(
children: [
Container(
height: 60,
padding: new EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: HexColor(HexColor.white),
),
width: MediaQuery.of(context).size.width,
child: Text("Select Your Location",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
color: Colors.grey,
fontFamily: 'montserrat_medium',
decoration: TextDecoration.none,
))),
],
)
]),
)),
)
),
);
}
}
Is there a way to remove the drop shadow under the app bar (AppBar class) when using a Scaffold widget in Flutter?
Looking at the AppBar constructor, there's an elevation property that can be used to set the height of the app bar and hence the amount of shadow cast. Setting this to zero removes the drop shadow:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My App Title'),
elevation: 0,
),
body: const Center(
child: Text('Hello World'),
),
);
}
I have tried something it might help you
AppBar(
backgroundColor: Colors.transparent,
bottomOpacity: 0.0,
elevation: 0.0,
),
Check this out
If you want to remove the shadow of all app bars without repeating code, just add a AppBarTheme property with elevation: 0 to your app theme (ThemeData), inside your MaterialApp widget:
// This code should be located inside your "MyApp" class, or equivalent (in main.dart by default)
return MaterialApp(
// App Theme:
theme: ThemeData(
// ••• ADD THIS: App Bar Theme: •••
appBarTheme: AppBarTheme(
elevation: 0, // This removes the shadow from all App Bars.
)
),
);
I'm trying to change the color of the system status bar to black.
The configuration seems to be overridden by the AppBar class. I can achieve what I want by assigning the theme: to ThemeData.dark() when creating the Material App, and then specifying an appBar attribute. But I don't want an AppBar, and also, doing it this way changes all the font colors.
A possible solution is to inherit ThemeData.bright() into a new class, then add something that only changes the system status bar through
setSystemUIOverlayStyle
And then I would need to specify AppBar and make it invisible somehow?
Documentation
main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:english_words/english_words.dart';
import 'layout_widgets.dart' as layout_widgets;
class RandomWords extends StatefulWidget {
#override
createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _saved = new Set<WordPair>();
final _biggerFont = const TextStyle(fontSize: 18.0);
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map((pair) {
return new ListTile(
title: new Text(pair.asPascalCase,style:_biggerFont)
);
}
);
final divided = ListTile.divideTiles(
context:context,
tiles: tiles,).toList();
return new Scaffold(
appBar: new AppBar(
title: new Text('Saved Suggestions'),
),
body: new ListView(children:divided),
);
}
)
);
}
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
// The item builder callback is called once per suggested word pairing,
// and places each suggestion into a ListTile row.
// For even rows, the function adds a ListTile row for the word pairing.
// For odd rows, the function adds a Divider widget to visually
// separate the entries. Note that the divider may be difficult
// to see on smaller devices.
itemBuilder: (context, i) {
// Add a one-pixel-high divider widget before each row in theListView.
if (i.isOdd) return new Divider();
// The syntax "i ~/ 2" divides i by 2 and returns an integer result.
// For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
// This calculates the actual number of word pairings in the ListView,
// minus the divider widgets.
final index = i ~/ 2;
// If you've reached the end of the available word pairings...
if (index >= _suggestions.length) {
// ...then generate 10 more and add them to the suggestions list.
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
}
);
}
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[
new IconButton(icon:new Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
}
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
Column buildButtonColumn(IconData icon, String label) {
Color color = Theme.of(context).primaryColor;
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(icon, color: color),
new Container(
margin: const EdgeInsets.only(top:8.0),
child: new Text(
label,
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: color,
)
),
)
],
);
}
Widget titleSection = layout_widgets.titleSection;
Widget buttonSection = new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildButtonColumn(Icons.contact_mail, "CONTACT"),
buildButtonColumn(Icons.folder_special, "PORTFOLIO"),
buildButtonColumn(Icons.picture_as_pdf, "BROCHURE"),
buildButtonColumn(Icons.share, "SHARE"),
],
)
);
Widget textSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Text(
'''
The most awesome apps done here.
''',
softWrap: true,
),
);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return new MaterialApp(
title: 'Startup Name Generator',
// theme: new ThemeData(
// brightness: Brightness.dark,
// primarySwatch: Colors.blue,
// ),
// theme: new ThemeData(),
debugShowCheckedModeBanner: false,
home: new Scaffold(
// appBar: new AppBar(
//// title: new Text('Top Lakes'),
//// brightness: Brightness.light,
// ),
// backgroundColor: Colors.white,
body: new ListView(
children: [
new Padding(
padding: new EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 0.0),
child: new Image.asset(
'images/lacoder-logo.png',
width: 600.0,
height: 240.0,
fit: BoxFit.fitHeight,
),
),
titleSection,
buttonSection,
textSection,
],
),
),
);
}
}
layout_widgets.dart
import 'package:flutter/material.dart';
Widget titleSection = new Container(
padding: const EdgeInsets.all(32.0),
child: new Row(children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Container(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Text(
"Some-Website.com",
style: new TextStyle(
fontWeight: FontWeight.bold,
),
)
),
new Text(
'Small details',
style: new TextStyle(
color: Colors.grey[500],
)
)
],
)),
new Icon(Icons.star,color: Colors.orange[700]),
new Text('100'),
]));
I tried the method SystemChrome.setSystemUIOverlayStyle(), as far as I tested (Flutter SDK v1.9.1+hotfix.2, running on iOS 12.1) it works perfect for Android. But for iOS, e.g. if your first screen FirstScreen() doesn't have an AppBar, but the second SecondScreen() does, then at launch the method does set the color in FirstScreen(). However, after navigating back to FirstScreen() from SecondScreen(), the status bar color becomes transparent.
I come up with a hacky workaround by setting an AppBar() with zero height, then status bar's color gets changed by the AppBar, but the AppBar itself is not visible. Hope it would be useful to someone.
// FirstScreen that doesn't need an AppBar
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(0),
child: AppBar( // Here we create one to set status bar color
backgroundColor: Colors.black, // Set any color of status bar you want; or it defaults to your theme's primary color
)
)
);
}
// SecondScreen that does have an AppBar
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar()
}
}
Here is the screenshot of FirstScreen in iPhone Xs Max iOS 12.1:
UPDATE:
Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // Navigation bar
statusBarColor: Colors.pink, // Status bar
),
),
)
Old solution (still works)
Both iOS and Android:
appBar: AppBar(
backgroundColor: Colors.red, // status bar and navigation bar color
brightness: Brightness.light, // status bar brightness
)
Only for Android (More flexibility)
You can use SystemChrome class to change Status bar and Navigation bar color.
First import
import 'package:flutter/services.dart';
After this, you need to add following lines (better place to put these lines is in your main() method)
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue,
statusBarColor: Colors.pink,
));
}
If you don't want AppBar at all, then you can just call setSystemUIOverlayStyle in the main function:
void main() async {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
runApp(new MaterialApp(
home: new Scaffold(),
));
}
It's more tricky if you have an app bar in one scaffold, and none in another. In that case I had to call setSystemUIOverlayStyle after pushing new route with a scaffold that does not have an appbar:
#override
Widget build(BuildContext context) {
final page = ModalRoute.of(context);
page.didPush().then((x) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
});
return new Scaffold();
}
TLDR; you need to use Scaffold, it manages the colors even if you navigate back and forth.
Scaffold(
appBar: AppBar(brightness: Brightness.dark), \\ dark content -> white app bar
body: ...
);
If your screen does not have an app bar, then you need to use AnnotatedRegion with scaffold in order to achieve the same effect.
AnnotatedRegion(
value: SystemUiOverlayStyle.light, // this will make the app bar white
child: Scaffold(
body:
),
);
Instead of SystemUiOverlayStyle.light, you can customize it:
SystemUiOverlayStyle(
statusBarBrightness: Brightness.light,
systemNavigationBarDividerColor: Colors.blue,
...
);
I'm quite new to StackOverflow & I've never used Flutter however I have found this package that seems to make things relatively easy.
Method 1: Using the package
Once this is imported all you need to do is add this code fragment:
try {
await FlutterStatusbarcolor.setStatusBarColor(Colors.black);
} on PlatformException catch (e) {
print(e);
}
Replacing the parameter for the setStatusBarColor() should give you the desired result, a full list of colours can be found here.
Method 2: Using default functions
If this doesn't work / you don't want to add extra packages or libraries then perhaps this StackOverflow answer may help.
It involves using a similar function to the above method: getWindow().setStatusBarColor() or getActivity().getWindow().setStatusBarColor()
Replacing the parameter with the desired hex code from the same list as earlier may also result in a solution.
Hope it works/helps!
i have achieved that way
#override
void initState() {
super.initState();
// Transparent status bar
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent,));
}
you can also see different properties after comma
SystemUiOverlayStyle(statusBarColor: Colors.transparent,)
just use combination of ctrl + space after comma and you will get what you can use.
Please read this flutter package. To set status bar text as black, you can set FlutterStatusbarcolor.setStatusBarWhiteForeground(false). you need to have this line of code in didChangeAppLifecycleState method with resume state so that when you go to other application and come back, the status bar text color are set to your initial setup.
Also, you need to set the your AppBar's TextTheme. like following.
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarWhiteForeground(false);
return MaterialApp(
title:// title goes here
theme:// your theme goes here
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: _loadAppBarTitle(),
textTheme: Theme.of(context).textTheme),
body: //body's goes here
);
);
Hopefully, this one can help somebody who has the similar problem with me.
Flutter 2.5.1
'brightness' is deprecated and shouldn't be used. This property is no longer used, please use systemOverlayStyle instead. This feature was deprecated after v2.4.0-0.0.pre.. Try replacing the use of the deprecated member with the replacement.
Old code
brightness: Brightness.dark,
New code
systemOverlayStyle: SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // Navigation bar
statusBarColor: Colors.red, // Status bar
),
Just write this code inside the AppBar
Scaffold(
drawer: const SideBar(),
appBar: AppBar(
title: const Text("SomeThing"),
systemOverlayStyle: SystemUiOverlayStyle.dark,//this is what you wanted
),
body: YourWidget()
For some reason, it didn't work for me when I put my AppBar directly in my Scaffold, so I added it like this :
Scaffold(
extendBodyBehindAppBar: true,
body: Stack (
children: [
AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.transparent,
systemOverlayStyle: SystemUiOverlayStyle.light,
),
// ... other widgets
],
),
)
And it changed the color of both my status bar and navigation bar (background of home indicator in Android)