如何仅在 Flutter 中的特定页面上更改状态栏颜色

Posted 2023-02-23

【中文标题】如何仅在 Flutter 中的特定页面上更改状态栏颜色

【英文标题】：How do I Change Status Bar Color only on a Specific Page in Flutter

【发布时间】：2021-10-06 02:31:54

【问题描述】：

如何在 Flutter 中仅更改特定页面上的状态栏颜色？我尝试使用AnnotatedRegion，但它更改了整个应用程序的状态栏颜色。

【问题讨论】：

请检查此链接，flutteragency.com/change-statusbar-color-in-flutter 让我知道结果

***.com/a/53032540/14807758 也试试这个

【参考方案1】：

我把我的主要views/screens 包装成这样。

StatusBarColorChanger(
      isDark: true ,
      child: Scaffold(

如果您需要更多自定义，我为此创建了一个小部件。 你已经包装了每一页

class StatusBarColorChanger extends StatelessWidget 
  final Widget child;

  final bool isDark;

  StatusBarColorChanger(
    Key? key,
    required this.child,
    this.isDark = false,
  ) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        // For android.
        // Use [light] for white status bar and [dark] for black status bar.

        statusBarIconBrightness: isDark
            ? Platform.isAndroid
                ? Brightness.light
                : Brightness.dark
            : Brightness.dark,
        //  Platform.isAndroid? isDark ?  Brightness.light : Brightness.dark: ,

        statusBarColor: isDark ? Colors.black : Colors.white,

        // For ios.
        // Use [dark] for white status bar and [light] for black status bar.
        statusBarBrightness: isDark
            ? Platform.isAndroid
                ? Brightness.dark
                : Brightness.light
            : Brightness.light,
      ),
      child: Platform.isAndroid
          ? SafeArea(
              child: child,
            )
          : child,
    );