美文网首页
Flutter 修改状态栏颜色

Flutter 修改状态栏颜色

作者: 大成小栈 | 来源:发表于2023-08-13 14:32 被阅读0次

    首先,需要检查系统是否允许状态栏显示,检查创建项目时两个文件的配置,将相关内容注释掉or删除:

    // iOS 配置
    ./ios/Runner/Info.plist
    <key>UIMainStoryboardFile</key>
    <string>Main</string>
    <key>UIStatusBarHidden</key> <- <here>
    <true/> <- <here>
    <key>UISupportedInterfaceOrientations</key>
    
    // Android 配置
    ./android/app/src/main/res/values/styles.xml
    <style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowFullscreen">true</item> <- <here>
    

    然后,添加主题设置代码:

     // 状态栏字体白色
      static const SystemUiOverlayStyle light = SystemUiOverlayStyle(
        systemNavigationBarColor: Color(0xFF000000),
        systemNavigationBarDividerColor: null,
        statusBarColor: null,
        systemNavigationBarIconBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.light,
        statusBarBrightness: Brightness.dark,
      );
     
     
    //  状态栏字体黑色
      static const SystemUiOverlayStyle dark = SystemUiOverlayStyle(
        systemNavigationBarColor: Color(0xFF000000),
        systemNavigationBarDividerColor: null,
        statusBarColor: null,
        systemNavigationBarIconBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.light,
      );
    

    将上面逻辑添加到main.dart中 runApp() 方法下,就可以设置全局状态栏字体颜色为白色了。

    若不同的页面显示不同的颜色,可以直接将这个引入到需要的页面,改成其他的颜色即可:

    //白色
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    

    参考链接:
    https://www.likecs.com/show-308210602.html

    相关文章

      网友评论

          本文标题:Flutter 修改状态栏颜色

          本文链接:https://www.haomeiwen.com/subject/synfmdtx.html