基于系统明暗模式的动态主题变化

Posted 2023-02-23

【中文标题】基于系统明暗模式的动态主题变化

【英文标题】：Dynamic Theme Change Based On System's Dark & Light Mode

【发布时间】：2020-08-17 21:47:45

【问题描述】：

我一直致力于 Flutter 中的动态明暗模式功能。

当我从系统设置中更改移动系统的深色/浅色模式时，我想将应用的主题更改为深色主题或浅色主题。

但是，我无法根据 Mobile System 的亮模式或暗模式更改应用的暗模式或亮模式。

我正在使用以下代码。

main.dart

    import 'package:flutter/material.dart';
    import 'package:flutterrookieapp/provider/ThemeProvider.dart';
    import 'package:flutterrookieapp/utils/AppTheme.dart';
    import 'package:provider/provider.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget 
      @override
      Widget build(BuildContext context) 
        return MultiProvider(
          providers: [
            ChangeNotifierProvider(
              create: (context) => ThemeProvider(
                  MediaQuery.of(context).platformBrightness == Brightness.dark
                      ? darkTheme
                      : lightTheme),
            )
          ],
          child: Consumer<ThemeProvider>(
            builder: (temp, theme, _) 
              return MaterialApp(
                debugShowCheckedModeBanner: false,
                title: 'Flutter Sample',
                theme: MediaQuery.platformBrightnessOf(context) == Brightness.dark
                    ? darkTheme
                    : lightTheme,
                home: HomePage(),
              );
            ,
          ),
        );
      
    
  

ThemeProvider.dart

import 'package:flutter/material.dart';

class ThemeProvider with ChangeNotifier 
  ThemeData _themeData;

  ThemeProvider(this._themeData);

  ThemeData getTheme() => _themeData;

  setTheme(ThemeData themeData) async 
    this._themeData = themeData;
    notifyListeners();
  

【参考方案1】：

您可以在MaterialApp 中使用darkTheme 或theme 它总是来自移动系统设置

MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Flutter Sample',
  darkTheme: darkTheme,
  theme: lightTheme,
  home: HomePage(),
),