Flutter如何更改状态栏颜色

在Flutter中,例如iOS的状态栏中的时间、网络信号等字体的颜色修改有以下两个方式:
在 system_chrome.dart文件中有两段代码,用来更改不同的状态栏字体颜色。

介绍

  1. 字体颜色白色
/// System overlays should be drawn with a light color. Intended for
  /// applications with a dark background.
  static const SystemUiOverlayStyle light = SystemUiOverlayStyle(
    systemNavigationBarColor: Color(0xFF000000),
    systemNavigationBarDividerColor: null,
    statusBarColor: null,
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.dark,
  );
  1. 字体颜色黑色
    /// System overlays should be drawn with a dark color. Intended for
      /// applications with a light background.
      static const SystemUiOverlayStyle dark = SystemUiOverlayStyle(
        systemNavigationBarColor: Color(0xFF000000),
        systemNavigationBarDividerColor: null,
        statusBarColor: null,
        systemNavigationBarIconBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.light,
      );

    使用

    白色

    void main() {
      runApp(MyApp());
      //白色
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    }
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: Scaffold(
            backgroundColor: Colors.blue,
            body: Container(),
          ),
        );
      }
    }
    3884536-1dd9ee3bc0b95d74.png

    黑色

    void main() {
      runApp(MyApp());
      //黑色
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    }
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: Scaffold(
            backgroundColor: Colors.white,
            body: Container(),
          ),
        );
      }
    }

3884536-c9663e967c5d2afc.png

原文:https://www.jianshu.com/p/9409845d8794?utm

本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《Flutter如何更改状态栏颜色
分享到:更多

相关推荐



Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


关注公众号“Flutter前线”,各种Flutter项目实战经验技巧,干活知识,Flutter面试题答案,等你来领取。


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)