Flutter status bar change color dynamically

Question

Most of the answers about this topics suggests the follow solution.

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);

But according to this answer

The build method is designed in such a way that it should be pure/without side effects.

The proposed solution has one drawback - it's does not work in case when I have to change status color depends on current screen.

Is there way how I can handle it?

Answer 1

You can use AnnotatedRegion to specify a different statusBarColor for each route:

class MyApp extends StatelessWidget {
  Map<String, WidgetBuilder> get routes {
    return {
      '/': (context) {
        return AnnotatedRegion<SystemUiOverlayStyle>(
          value: const SystemUiOverlayStyle(statusBarColor: Colors.blue),
          child: Scaffold(body: Home()),
        );
      },
      '/foo': (context) {
        return AnnotatedRegion<SystemUiOverlayStyle>(
          value: const SystemUiOverlayStyle(statusBarColor: Colors.red),
          child: Scaffold(body: Foo()),
        );
      },
    };
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: routes,
    );
  }
}