Flutter statusBar Color dependent on current Theme-CodePudding

How do I make the color from my setSystemUIOverlayStyle dependent of the current theme mode? I tried it with this:

bool isDarkModeOn(BuildContext context){
  final ThemeData mode = Theme.of(context);
  var whichMode=mode.brightness;
  if(whichMode == Brightness.dark){
    return true;
  }else{
    return false;
  }
}

(Checking if darkmode is enable - Function works fine)

  @override
  Widget build(BuildContext context) {
    final systemThemeLight = SystemUiOverlayStyle.light.copyWith(
      systemNavigationBarColor:  const Color(0xdfd6f5ca),
      systemNavigationBarIconBrightness: Brightness.light,
    );
        final systemThemeDark = SystemUiOverlayStyle.dark.copyWith(
      systemNavigationBarColor:   Colors.black,
      systemNavigationBarIconBrightness: Brightness.light,
    );
    SystemChrome.setSystemUIOverlayStyle( isDarkModeOn(context) ? systemThemeDark :  systemThemeLight);

The idea works, but only when I update the state by navigating to another screen, not by switching the Switch inside my App-settings. Does anybody have a better idea?

CodePudding user response：

I finally found a Solution to this problem by myself, maybe it helps someone:

Wrap your scaffold above the bottomNavigatioBar:[...] with:

 return AnnotatedRegion<SystemUiOverlayStyle>(
      value: _currentStyle,
      child: Scaffold(

below Widget build function:

bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
_changeColor(isDarkMode);

And inside Statefull widget:

SystemUiOverlayStyle _currentStyle = SystemUiOverlayStyle.dark;
  void _changeColor(bool isDarkMode) {
    setState(() {
      _currentStyle = SystemUiOverlayStyle.dark.copyWith(
          systemNavigationBarColor: isDarkMode ? const Color(0xff272727) : Colors.grey[200]
      );
    });
  }

Then it changes automatically....