title: How to change Status Bar and App Bar color in Flutter?
body: <p>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 <code>ThemeData.dark()</code> when creating the Material App, and then specifying an <code>appBar attribute</code>. But I don't want an AppBar, and also, doing it this way changes all the font colors.</p>
  <p>A possible solution is to inherit ThemeData.bright() into a new class, then add something that only changes the system status bar through</p>
  <pre><code>setSystemUIOverlayStyle
  </code></pre>
  <p>And then I would need to specify AppBar and make it invisible somehow?</p>
  <p><a href="https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html" rel="noreferrer">Documentation</a></p>
  <p>main.dart</p>
  <pre><code>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() =&gt; new RandomWordsState();
  }
  class RandomWordsState extends State&lt;RandomWords&gt; {
    final _suggestions = &lt;WordPair&gt;[];
    final _saved = new Set&lt;WordPair&gt;();
    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 &quot;i ~/ 2&quot; 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 &gt;= _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: &lt;Widget&gt;[
            new IconButton(icon:new Icon(Icons.list), onPressed: _pushSaved),
          ],
        ),
        body: _buildSuggestions(),
      );
    }
  
  }
  
  
  void main() =&gt; 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: &lt;Widget&gt;[
            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: &lt;Widget&gt;[
            buildButtonColumn(Icons.contact_mail, &quot;CONTACT&quot;),
            buildButtonColumn(Icons.folder_special, &quot;PORTFOLIO&quot;),
            buildButtonColumn(Icons.picture_as_pdf, &quot;BROCHURE&quot;),
            buildButtonColumn(Icons.share, &quot;SHARE&quot;),
          ],
        )
      );
      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,
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>layout_widgets.dart</p>
  <pre><code>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(
                  &quot;Some-Website.com&quot;,
                  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'),
      ]));
  </code></pre>