No matter what I do I can't seem to change the text color of the Status Bar in my Flutter App. The Status Bar Background Color does change to white successfully, but the text color does not change.

Here are the things I've already tried:

I've tried to set the Overlay Style to the AppBarTheme:

Theme.of(context).appBarTheme.copyWith(
      systemOverlayStyle: SystemUiOverlayStyle.dark.copyWith(
        systemNavigationBarColor: Clr.secondary,
        statusBarColor: Colors.transparent,
        statusBarBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.light,
      ),

I have also tried doing it in each screen:

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle.dark.copyWith(
    systemNavigationBarColor: Clr.secondary,
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.dark,
    statusBarIconBrightness: Brightness.dark,
  ),
  child: Scaffold(),
);

I have also tried to set the SystemOverlayStyle via SystemChrome before runApp():

void main(List<String> args) async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    systemNavigationBarColor: Clr.secondary,
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.dark,
    statusBarIconBrightness: Brightness.dark,
  ));
  runApp(const ProviderScope(child: JustCollectApp()));
}

I've also tried different combinations for Brightness. None of them make any difference.

I need 2 questions answered:

1. What is going on here? How can I change the Status Bar Text Color to black?
2. I have some screens with an AppBar and some screens without an AppBar. All of them require the StatusBar to be white with a dark text overlay. How do I do that?

CodePudding user response：

do this on your main.dart file

  void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: <Your Color>,
        statusBarBrightness: Brightness.dark,
        statusBarIconBrightness: Brightness.dark,
      )); 
      runApp(const ProviderScope(child: MyApp()));
    }

CodePudding user response：

Use NormalTheme for your androidManifest file.

<application>
<activity>

<meta-data android:name="io.flutter.embedding.android.NormalTheme" android:resource="@style/NormalTheme" />

</activity>
</application>

Using this theme type, you can see the change in the theme for your app.

Remember to use a theme and darktheme in the app widget:

theme: LightTheme().get(),
darkTheme: DarkTheme().get(),