如何在Flutter中监听平台亮度的变化?

b09cbbtk  于 2022-11-25  发布在  Flutter
关注(0)|答案(6)|浏览(324)

我正在设置一个系统,当用户将系统主题更改为暗模式时,它会更改主题,而Flutter则运行良好!但是,当用户更改系统主题时,系统导航和状态栏不会更改颜色。我在构建方法中的主页上运行了代码,但这似乎没有做到这一点。以下是主页构建方法中的代码:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Brightness sysBrightness = MediaQuery.of(context).platformBrightness;
    if (sysBrightness == Brightness.dark)
      Themes.setDarkSystemColors();
    else
      Themes.setLightSystemColors();

    return Scaffold(
      appBar: CustomAppBar(title: "Home"),
      drawer: CustomDrawer(),
      body: SizedBox(),
    );
  }
}

下面是主应用中theme:darkTheme:的代码:

return MaterialApp(
      initialRoute: '/',
      routes: routes,
      navigatorObservers: [_routeObserver],
      theme: Themes.lightTheme,
      darkTheme: Themes.darkTheme,
      debugShowCheckedModeBanner: false,
      title: 'School Life',
    );
f87krz0w

f87krz0w1#

覆写initState方法并使用onPlatformBrightnessChanged

@override
void initState() {
  super.initState();
  final window = WidgetsBinding.instance.window;

  // This callback is called every time the brightness changes.
  window.onPlatformBrightnessChanged = () {
    final brightness = window.platformBrightness;
  };
}

要处理默认行为,请在上面的回调中添加以下代码行。

WidgetsBinding.instance.handlePlatformBrightnessChanged();
sd2nnvve

sd2nnvve2#

@CopsOnRoad答案工作完美,但它禁用了自动React平台亮度变化在你的小部件,要解决这个问题,使用这个:

@override
void initState() {
  super.initState();

  var window = WidgetsBinding.instance!.window;
  window.onPlatformBrightnessChanged = () {
    WidgetsBinding.instance?.handlePlatformBrightnessChanged();
    // This callback is called every time the brightness changes.
    var brightness = window.platformBrightness;
  };
}

另一种处理方法是:

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  @override
  void initState() {
    WidgetsBinding.instance?.addObserver(this);
    super.initState();
  }

  @override
  void dispose() {
    WidgetsBinding.instance?.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangePlatformBrightness() {
    var brightness = Theme.of(context).brightness;
    super.didChangePlatformBrightness();
  }
}
wnvonmuf

wnvonmuf4#

有一个ThemeMode枚举(我想是从Flutter 1.9版本开始),所以你可以设置theme为light,darkTheme为dark,themeModeThemeMode.system(默认),ThemeMode.lightThemeMode.dark)决定使用哪个主题。

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,
)

但是,我不确定是否有办法监听platformBrightness的变化(ThemeMode也在幕后使用platformBrightness)。

mnemlml8

mnemlml85#

[Feb 2022年] -对我来说很好。
使用-***最终亮度亮度= MediaQuery.platformBrightnessOf(上下文);***.
这将侦听主题更改。您可以基于此更改进行不同的呈现。

@override
  Widget build(BuildContext context) {
    final Brightness brightness = MediaQuery.platformBrightnessOf(context);
    bool isDarkMode = brightness == Brightness.dark;

稍后在Widget中根据***isDarkMode***进行渲染
例如:

资产图像(是否为暗模式?暗背景图像:lightBg图像)

Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(isDarkMode ? darkBgImage : lightBgImage),
                  fit: BoxFit.cover,
                  colorFilter:
                      const ColorFilter.mode(Colors.black45, BlendMode.darken),
                ),
              ),
            ),
cedebl8k

cedebl8k6#

有两个选项:

  • MediaQueryData.platformBrightness:“主机平台的当前亮度模式”
  • MediaQueryData.brightness:“整体主题亮度。"。你可能需要这个。

如果你有一个应用内设置,让用户在不同的操作系统下配置不同的亮度,platformBrightness就不起作用。你需要你的应用亮度。

// Doesn't always work, because platformBrightness is: "The current brightness mode of the host platform".
    final brightness_wrong_1 = MediaQuery.platformBrightnessOf(context);
    final brightness_wrong_2 = MediaQuery.of(context).platformBrightness;
    // If you use flutter hooks (doesn't work)
    final brightness_wrong_3 = usePlatformBrightness();
    // Works:
    final brightness = Theme.of(context).brightness;

相关问题