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?

What do you want, exactly? Change the status bar color according to the current route? — Hugo Passos, May 24 '19 at 22:02
Why don't you call `setStatusBarColor` in the `initState` of each `Widget` that you want a different color? Indeed, calling it at `build` makes no sense. — Hugo Passos, May 24 '19 at 22:04

Hugo Passos · Accepted Answer · 2020-07-26T17:41:52.293

9

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

edited Jul 26 '20 at 17:41

answered May 24 '19 at 22:20

Hugo Passos

7,719
2
35
52

Very useful to dynamically change the theme, thanks a lot! – rubStackOverflow May 05 '20 at 20:20
it successfully changes navigation bar colour but for some reason colour of status bar remains same as set by first screen. – Shashank Rawat Jan 12 '23 at 10:51

Flutter status bar change color dynamically

1 Answers1