Flutter: Changing color of status bar when using Get.changeTheme()

Question

I am looking for a way to change the appearance of the status bar when changing my theme using GetX's Get.changeTheme() utility function.

This is my code:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: lightTheme(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: TextButton(
                onPressed: () => {
                      Get.changeTheme(
                          Get.isDarkMode ? lightTheme() : darkTheme())
                    },
                child: Text('Change Theme'))));
  }
}

ThemeData darkTheme() {
  return ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey[900]);
}

ThemeData lightTheme() {
  return ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white);
}

I am not able to figure out how to change the color of the status bar when the "Change Theme" button is pressed (s. screenshot).

I have looked into the documentation of ThemeData but there seems to be no property which I could add to my darkTheme()in order to change the color of the text in the status bar to white. I am also aware of

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

But I do not know where to put this piece of code in the GetX architecture of my code, as including it within the main() method will not allow me to swop themes afterwards. I am also not planning on using AppBar() which would let me change the brightness property simply to achieve the desired outcome.

I am happy for any hints and advice!

Answer 1

You can use the routingCallback function inside the GetMaterialApp widget so that you can change the status bar according to your app's routing.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: lightTheme(),
      home: MyHomePage(),
      // Add this function to GetMaterialApp Widget
      routingCallback: (value) {
         // Here you can check which screen your app is currently on
         if(value.current == '/home'){
           SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
             statusBarColor: Colors.white
           ));
          }
             
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: TextButton(
                onPressed: () => {
                      Get.changeTheme(
                          Get.isDarkMode ? lightTheme() : darkTheme())
                    },
                child: Text('Change Theme'))));
  }
}

ThemeData darkTheme() {
  return ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey[900]);
}

ThemeData lightTheme() {
  return ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white);
}