Set status bar color in parent screen when pop from PageRoute in Flutter

Question

Here is my code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: "test",
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: Scaffold(body: MyWidget()),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); // only works initially, but not when navigating back from PageRoute
    return Column(
      children: <Widget>[
        Container(height: 80.0, color: Colors.orange),
        const SizedBox(height: 100.0),
        RaisedButton(child: Text('Next'),
          onPressed: () {Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen())).then((value) {
            _refreshSystemStatusColor(); // doesn't work
          });},
        )
      ],
    );
  }

  void _refreshSystemStatusColor() {
    setState(() {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    });
  }
}

class NewScreen extends StatefulWidget {
  @override
  _NewScreenState createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  @override
  void dispose() {
    // SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); // only this line works. I don't want to convert all my widgets to StatefulWidget
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); // doesn't work
        return Future.value(true);
      },
      child: Scaffold(appBar: AppBar())
    );
  }
}

You can see that I tried three ways to set the system status bar font color back:

• Navigator.push().then((value) {_refreshSystemStatusColor();});}
• onWillPop: () {SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);return Future.value(true);}
• on dispose()

So far, the first two methods don't work, and only setting it on dispose() works. But I feel this is really ugly. I don't want to convert all my widgets to StatefulWidget only for this purpose.

Is there a better way to do this?

Answer 1

When using Scaffold you can use AnnotatedRegion to set the System Overlay Style. And when you are using a Scaffold with an App bar you can set the property brightness to change the System Overlay Style. Here an example, it's not necessary to use StatefulWidgets.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "test",
      theme: ThemeData(primarySwatch: Colors.blueGrey),
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    SystemUiOverlayStyle _currentStyle = SystemUiOverlayStyle.dark;
    return Scaffold(
        body: AnnotatedRegion(
      value: _currentStyle,
      child: Column(
        children: <Widget>[
          Container(height: 80.0, color: Colors.orange),
          const SizedBox(height: 100.0),
          RaisedButton(
            child: Text('Next'),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => NewScreen()));
              //     .then((value) {
              //   _refreshSystemStatusColor(); // doesn't work
              // });
            },
          )
        ],
      ),
    ));
  }
}

class NewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        return Future.value(true);
      },
      child: Scaffold(
          appBar: AppBar(
            brightness: Brightness.light,
          ),
          body: Container(
            child: Text('Hello'),
          )),
    );
  }
}

Hope this help.