Flutter 平台亮度不规则

Question

在我的 flutter 应用程序中，我允许用户使用

Follow System

、

Light

或

Dark

主题更改应用程序的主题。

但是状态栏颜色没有相应改变。我的状态栏图标颜色始终保持白色（这意味着当设置为浅色主题时，它变得不可见）。

我什至尝试了以下方法，但没有成功：

// Determine the app brightness (theme)
final brightness = PlatformDispatcher.instance.platformBrightness;

print("Brightness: $brightness");

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarIconBrightness: brightness == Brightness.dark
      ? Brightness.light
      : Brightness.dark, // status bar color
));

然后我通过打印日志意识到了这一点：

无论我的应用程序主题如何，当系统UI（在我的手机设置中）本身设置为浅色主题时，无论我在应用程序中选择follow_system、浅色还是深色，它总是返回Brightness.Light，并且当系统UI本身设置时对于深色主题，它总是返回 Brightness.Dark

这是正常行为还是我做错了什么？

下面只是我如何初始化 MaterialApp 的参考：

  ThemeData light() {
return theme(const ColorScheme(
  brightness: Brightness.light,
  primary: ....,
  )
)

ThemeData dark() {
return theme(const ColorScheme(
  brightness: Brightness.dark,
  primary: ....,
  )
)

ThemeData lightHighContrast() {
return theme(const ColorScheme(
  brightness: Brightness.light,
  primary: ....,
  )
)

ThemeData darkHighContrast() {
return theme(const ColorScheme(
  brightness: Brightness.dark,
  primary: ....,
  )
)


ThemeData theme(ColorScheme colorScheme) => ThemeData(
    useMaterial3: true,
    brightness: colorScheme.brightness,
    colorScheme: colorScheme,
    appBarTheme: appBarTheme,
    textTheme: textTheme.apply(
      bodyColor: colorScheme.onSurface,
      displayColor: colorScheme.onSurface,
    ),
    scaffoldBackgroundColor: colorScheme.surface,
    canvasColor: colorScheme.surface,
  );


class MesMaterialApp extends ConsumerWidget {
  MesMaterialApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Get the initial location
    final intitialLocation =
        ref.watch(settingsProvider.select((s) => s.isOnboarded))
            ? HomeRoute.path
            : WelcomeRoute.path;

    // Set the initial location
    MesAppRouter.instance.setInitialLocation(intitialLocation);

    // Get the router instance
    final router = MesAppRouter.instance.getRouter();

    // Determine the app brightness (theme)
    final brightness = PlatformDispatcher.instance.platformBrightness;

    print("Brightness: $brightness");

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: brightness, // status bar icons' color
      statusBarColor: brightness == Brightness.dark
          ? Colors.white
          : Colors.black, // status bar color
    ));

    // Create the text theme
    TextTheme textTheme = createTextTheme(context, "Poppins", "Lato");

    // Create the app bar theme
    AppBarTheme appBarTheme = createAppBarTheme(brightness);

    // Create the material theme
    MaterialTheme theme = MaterialTheme(
      textTheme,
      appBarTheme,
    );

    // Return the Material App
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: theme.light(),
      darkTheme: theme.dark(),
      highContrastTheme: theme.lightHighContrast(),
      highContrastDarkTheme: theme.darkHighContrast(),
      themeMode: ref.watch(settingsProvider.select(
        (s) => s.theme,
      )),
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      locale: ref.watch(settingsProvider.select(
        (s) => s.locale == MesLocale.system ? null : Locale(s.locale.lang),
      )),
      routerConfig: router,
    );
  }
}

Answer 1

class BrightnessExample extends StatefulWidget {
  const BrightnessExample({super.key});

    @override
    State<BrightnessExample> createState() => _BrightnessExampleState();
 }

class _BrightnessExampleState extends State<BrightnessExample>
  with WidgetsBindingObserver {

@override
 void initState() {
 super.initState();
 WidgetsBinding.instance.addObserver(this);
}

 Brightness get platformBrightness {
     return WidgetsBinding.instance.platformDispatcher.platformBrightness;
 }

 @override
 void didChangePlatformBrightness() {
   super.didChangePlatformBrightness();
   // CHANGE SYSTEM STATUS BAR HERE ACCRODINLY WITH PLATFROM BRIGHNESS
 }


 @override
 Widget build(BuildContext context) {
     return const Placeholder();
 }
}

以下是如何使用 WidgetsBindingObserver mixin 来检测平台亮度变化并相应地更新应用程序的状态栏。

首先，将 WidgetsBindingObserver mixin 添加到您的 State 类中。

在 initState 方法中注册 WidgetsBindingObserver 以开始监听平台变化。

创建一个简单的 getter 来获取当前平台亮度，并重写 didChangePlatformBrightness 来动态处理亮度变化。