How do I Change Status Bar Color only on a Specific Page in Flutter

Question

How do I change Status Bar Color only on a Specific Page in Flutter? I tried using AnnotatedRegion but it Change the status bar Color of the Whole app.

Answer 1

I wrap my main views/screens like this.

StatusBarColorChanger(
      isDark: true ,
      child: Scaffold(

I created a widget for this, if you need more customization. and you have wrap every pages

class StatusBarColorChanger extends StatelessWidget {
  final Widget child;

  final bool isDark;

  StatusBarColorChanger({
    Key? key,
    required this.child,
    this.isDark = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        // For Android.
        // Use [light] for white status bar and [dark] for black status bar.

        statusBarIconBrightness: isDark
            ? Platform.isAndroid
                ? Brightness.light
                : Brightness.dark
            : Brightness.dark,
        //  Platform.isAndroid? isDark ?  Brightness.light : Brightness.dark: ,

        statusBarColor: isDark ? Colors.black : Colors.white,

        // For iOS.
        // Use [dark] for white status bar and [light] for black status bar.
        statusBarBrightness: isDark
            ? Platform.isAndroid
                ? Brightness.dark
                : Brightness.light
            : Brightness.light,
      ),
      child: Platform.isAndroid
          ? SafeArea(
              child: child,
            )
          : child,
    );
  }
}