How to change Status Bar and App Bar color in Flutter?

Question

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'),     ])); 

Answer 1

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:

Answer 2

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,   )); } 

---