status bar doesn't change background color in flutter

Question

I have two pages first one have white status bar and the second page has gray status bar but when I move from one to another page the second page takes first status bar color??

NOTE: when I run the second page from main function it takes the right color

I use this for status bar:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
        statusBarColor: Color(0xffF6F6F6), 
        statusBarBrightness: Brightness.dark 
));

what is the reason for this?

Answer 1

Try out this:-

Wrap your MaterialApp with below code in main.dart class:-

AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, //set as per your  status bar color
        systemNavigationBarColor: Colors.black, //set as per your navigation bar color
        statusBarIconBrightness: Brightness.dark, //set as per your status bar icons' color
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
      child: MaterialApp(

And if you want change appbar color of whole app then try out below

theme: Theme.of(context).copyWith(
            appBarTheme: Theme.of(context)
                .appBarTheme
                .copyWith(brightness: Brightness.light),
        ),