Flutter中如何自定义状态栏？

Posted 2023-02-23

【中文标题】Flutter中如何自定义状态栏？

【英文标题】：How to customize the status bar in flutter?

【发布时间】：2021-07-24 09:26:33

【问题描述】：

我创建了一个颤振应用程序，并在物理设备上进行检查。我查看了堆栈溢出以自定义状态栏，但得到的答案很少。但是当我更改状态栏的颜色时，整个状态栏的颜色都会发生变化（包括电池指示灯、移动网络和其他东西。）因此内容变得不可见。如何给状态栏的内容分别赋予不同的颜色？

任何帮助将不胜感激。

这是状态栏颜色变化的代码：

  import 'package:flutter/services.dart';
    
    void main() 
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white,
        statusBarColor: Colors.black,
      ));
      runApp(MyApp());
    
    
    class MyApp extends StatefulWidget 
      @override
      _MyAppState createState() => _MyAppState();
    

这是我得到的：

这就是我想要实现的目标：

【参考方案1】：

你可以试试这个。 使用 statusBarIconBrightness、statusBarBrightness 可以自定义状态栏图标和亮度。

 Widget build(BuildContext context) 
    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
            statusBarBrightness: Brightness.light,// here what you need 
            statusBarIconBrightness: Brightness.light // here is what you need,
            statusBarColor: Colors.black.withOpacity(0.8),
            systemNavigationBarColor: Colors.black.withOpacity(0.8)),
        child: Scaffold(body: _buildScreenWidget()));
  ;

你需要使用这些属性，直到你得到你想要的。

享受！！！

【讨论】：

非常感谢。它成功了。一整天都被困在这上面。 :D