Flutter custom navigation bar changes status bar color compatible with Android and IOS

Change the background color and font color of the status bar to a custom navigation bar under Flutter

preface

The Flutter has become so popular lately that I want to try it as a backend. At present, there are few documents about FLUTTER in China, and many problems are difficult to find solutions. Recently, we have encountered many problems with the use of Flutter. For example, we can change the background and font color of the status bar of Flutter. There are a lot of articles on Baidu and Google that explain how to use flutter properties to achieve the desired purpose. Android doesn’t really solve real problems on different platforms. The following solution is effective for ios and Android

attribute

  • AnnotatedRegion
  • AppBar

Both attributes can achieve the purpose of changing the status bar, but in the development process of the real computer, it was found that AnnotatedRegion could not achieve the expected effect in ios, and the font and color were not changed, and AppBar could not achieve the expected effect in Android. And AnnotatedRegion does not take effect if it is stored on the page under appBar. The solution is to use the Theme. Of (context). Platform to determine whether the current platform is ios or Android

  Widget build(BuildContext context) {
    returnAnnotatedRegion<SystemUiOverlayStyle>(// android changes the statusBarColor value: SystemUiOverlayStyle(statusBarColor: Colors.white, statusBarIconBrightness: Brightness.dark, systemNavigationBarColor: Colors.white, ), child: Scaffold( backgroundColor: Colors.white, appBar: PreferredSize(" // ", "//", ", ", ", ", ", ", ", ") Theme.of(context).platform == TargetPlatform.android ? Container() : AppBar(backgroundColor: Colors.white, elevation: 0), preferredSize: Size.fromHeight(0), ), body:Text('hello world')))}Copy the code

View source found SystemUiOverlayStyle with dark and light two built-in attributes, SystemUiOverlayStyle. Dark and SystemUiOverlayStyle. Light is effect in ios, You can only change the state font color, but not the background color

In the example above, the status bar font color is white by default in ios dark mode. There are also many solutions for ios dark mode