ios 如何改变状态栏图标和文本颜色的Flutter基于主题已设置?

pkbketx9  于 2023-02-17  发布在  iOS
关注(0)|答案(9)|浏览(225)

如何更新状态栏图标的颜色没有任何第三方插件?
在我的主题类中,我有一个函数,我正在尝试下面的代码,但尚未取得结果:
截至目前的主题代码:

// custom light theme for app
  static final customLightTheme = ThemeData.light().copyWith(
    brightness: Brightness.light,
    primaryColor: notWhite,
    accentColor: Colors.amberAccent,
    scaffoldBackgroundColor: notWhite,
    primaryTextTheme: TextTheme(
      title: TextStyle(
        color: Colors.black
      ),

    ),
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(color: Colors.black),
      elevation: 0.0,
    )
  );

  // custom dark theme for app
  static final customDarkTheme = ThemeData.dark().copyWith(
    brightness: Brightness.dark,
    primaryColor: Colors.black,
      accentColor: Colors.orange,
      scaffoldBackgroundColor: Colors.black87,
      primaryTextTheme: TextTheme(
        title: TextStyle(
            color: Colors.white
        ),

      ),
      appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(color: Colors.white),
        elevation: 0.0,
      ),

  );

主题转换器代码:

// set theme for the app
   setTheme(ThemeData theme) {
     _themeData = theme;

     if(_themeData == ThemeChanger.customLightTheme){
       SystemChrome.setSystemUIOverlayStyle(
         const SystemUiOverlayStyle(
           statusBarColor: Colors.white,
           systemNavigationBarColor: Colors.white,
           systemNavigationBarDividerColor: Colors.black,
           systemNavigationBarIconBrightness: Brightness.dark,
         ),
       );
     } else {
       SystemChrome.setSystemUIOverlayStyle(
         const SystemUiOverlayStyle(
           statusBarColor: Colors.blue,
           systemNavigationBarColor: Colors.blue,
           systemNavigationBarDividerColor: Colors.red,
           systemNavigationBarIconBrightness: Brightness.light,
         ),
       );
     }

     notifyListeners();
   }

这不是我想要的,因为我不想要第三方解决方案。
Icon's color in status bar (Flutter)
目前,我得到的黑色图标在白色/轻的主题,也黑色图标(这应该是白色图标)在黑暗/黑色主题的主题变化。休息是所有工作良好。

oxiaedzo

oxiaedzo1#

更新(Flutter2.4.0)

  • 不要使用AnnotatedRegionAppBar.brightness,因为它们已被弃用,请使用以下代码:*
    *定制更少:
AppBar(
  systemOverlayStyle: SystemUiOverlayStyle.dark, // Both iOS and Android (dark icons)
)

*更多自定义:

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarBrightness: Brightness.light, // For iOS: (dark icons)
    statusBarIconBrightness: Brightness.dark, // For Android: (dark icons)
    statusBarColor: ...,
  ),
)
ukxgm1gy

ukxgm1gy2#

我还没有找到一种方法来设置状态栏图标的颜色,但对我来说,它的工作设置属性systemStatusBarContrastEnforcedtrue

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemStatusBarContrastEnforced: true,
  ));
k0pti3hp

k0pti3hp3#

这个改变主题的答案对我不起作用,但我用这个。我知道两者是一样的东西,但这样,我们也可以使用颜色和图标主题。

SystemChrome.setSystemUIOverlayStyle(
            SystemUiOverlayStyle(
                statusBarColor: Color(0xFFdde6e8),
                statusBarIconBrightness: Brightness.dark),
          );
xxls0lw8

xxls0lw84#

更改状态栏图标颜色(为白色)的步骤。
将此**SystemChrome...添加到您的void main()**中。在此之前,不要忘记import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.light,
    ),
  );
  runApp(MyApp());
}

在此之后,如果您将Scaffold()用于屏幕/页面,则在**AppBar()**中添加brightness: Brightness.dark,行,如下所示:

return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,

那好吧。

w46czmvw

w46czmvw5#

如果您正在使用的主题建设者为整个应用程序有新的方式来改变亮度(图标颜色)是白色或黑色如下

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      debugShowCheckedModeBanner: false,
      builder: (context, navigator) {
        return Theme(
          data: ThemeData(
              primaryColor: AppColors.primary,
              accentColor: AppColors.accent,
              appBarTheme: AppBarTheme(systemOverlayStyle: 
       SystemUiOverlayStyle.light) ,//this is new way to change icons color of status bar
              fontFamily: 'Poppins'
          ),
          child: navigator,
        );
      },
      
    );
  }
}
sr4lhrrt

sr4lhrrt6#

如果你使用的是AppBar,你可以设置brightness属性,这样状态栏的图标就会变成白色。

AppBar(
    brightness: Brightness.dark
)
rkttyhzu

rkttyhzu7#

我发现最好的方法是通过AppBar小部件来实现,如果你没有在屏幕上使用Appbar,你可以通过实现虚拟透明Appbar来实现:

Scaffold(
      // critical to imitate appbar absence
      extendBodyBehindAppBar: true,
      
      appBar: AppBar(
        // setup your style here
        systemOverlayStyle: SystemUiOverlayStyle.light,
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        toolbarHeight: 0.0,
      ),
      body: ...,
)
pgvzfuti

pgvzfuti8#

您可以通过使用所需主题调用setSystemUIOverlayStyle来设置状态栏主题。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    • 更新日期:**

可以指定自己的属性,例如,

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

检查可用属性here

  • 注意:对于应用的light主题,请使用dark覆盖,反之亦然。此外,请确保您使用import 'package:flutter/services.dart'; *

希望能有所帮助!

sauutmhj

sauutmhj9#

    • 注:**

如果设置的SystemUiOverlayStyle没有被AppBar等其他小部件覆盖,则接受的答案有效。

更新

既然很多人都有这个问题,加上一个答案,涵盖了我能想到的所有案例。
对于所有情况,请根据需要使用systemOverlayStyle

灯光主题

SystemUiOverlayStyle.light

黑暗主题

SystemUiOverlayStyle.dark

自定义

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  systemNavigationBarColor: Color(0xFF000000),
  systemNavigationBarIconBrightness: Brightness.light,
  systemNavigationBarDividerColor: null,
  statusBarColor: Color(0xFFD59898),
  statusBarIconBrightness: Brightness.light,
  statusBarBrightness: Brightness.dark,
));

仅覆盖必需的属性。前3个用于导航栏,其余3个用于状态栏。
1.默认情况整个应用中的恒定系统覆盖样式,不包含干扰系统UI覆盖样式的应用栏和其他小部件。
将此代码添加到build方法内应用根小部件。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

1.具有恒定系统覆盖样式的应用在整个应用中使用应用栏的恒定主题。
如果有没有应用程序栏的屏幕,添加选项1中给出的代码,然后再添加这个。

MaterialApp(
    theme: ThemeData(
        appBarTheme: const AppBarTheme(
            systemOverlayStyle: SystemUiOverlayStyle.light,
        ),
    ),
),

1.应用的应用栏具有不同的系统覆盖样式每个应用栏都具有不同的系统覆盖样式。
应用程序栏:应用程序栏(标题:常量文本("标题文本"),系统覆盖样式:系统UI叠加样式. light,)

2.4.0-0.0以下版本的旧答案。

AppBar中不建议使用brightness属性。
此功能在v2.4.0 - 0.0.pre之后已弃用

appBar: AppBar(
    title: const Text('Title text'),
    brightness: Brightness.dark,
),

根据需要使用Brightness.lightBrightness.dark

相关问题