Flutter 切换主题

小鱼儿 2022-09-04 05:46 242阅读 0赞

在flutter中，ThemeData 来统一管理主题的配置信息。

ThemeData 涵盖了 Material Design 规范的可自定义部分样式，比如应用明暗模式 brightness、应用主色调 primaryColor、应用次级色调 accentColor、文本字体 fontFamily、输入框光标颜色 cursorColor 等。如果你想深入了解 ThemeData 的其他 API 参数，可以参考官方文档ThemeData。

我们先来定义一个全局的主题文件

import 'package:flutter/material.dart';
    // 浅色主题
    final ThemeData lightTheme = ThemeData(
        brightness: Brightness.light,//亮色主题
        accentColor: Colors.white,//(按钮)Widget前景色
        primaryColor: Color(0xff8d4b0e),//主题色
        iconTheme:IconThemeData(color: Colors.grey),//icon主题
        backgroundColor:Color(0xffffffff),
        dividerColor: Color(0xfff8f8f8),
        textTheme: TextTheme(subtitle1  : TextStyle(color: Colors.black))//文本主题
    );
    
    
    // 深色主题
    final ThemeData darkTheme = ThemeData(
        brightness: Brightness.dark,//深色主题
        accentColor: Color(0xff39393d),//(按钮)Widget前景色
        primaryColor: Color(0xff8d4b0e),//主题色
        backgroundColor:Color(0xff434343),
        dividerColor: Color(0xff3c3c3c),
        iconTheme:IconThemeData(color: Color(0xff8d4b0e)),//icon主题色
        textTheme: TextTheme(bodyText2 : TextStyle(color: Colors.white))//文本主题色
    );

在这里你可以定义一些主题颜色等信息，其他的设置在 [https://api.flutter.dev/flutter/material/ThemeData/ThemeData.html][https_api.flutter.dev_flutter_material_ThemeData_ThemeData.html]

接下来 我们在provider中提供全局主题的设置和标志

int get themeMode => _themeMode;
    ThemeData get  globalTheme => _globalTheme;
    
    
    
    void changeThemeMode(){
      if(_themeMode == 1){
        _themeMode = 0;
        _globalTheme = lightTheme;
      }else{
        _themeMode = 1;
        _globalTheme = darkTheme;
      }
      notifyListeners();
    }

接下来 我们在需要用到全局主题的地方使用

class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (_) => GlobalData()),
          ],
          child: Consumer<GlobalData>(
          builder: (context, darkModeProvider, _) {
            return MaterialApp(
                title: 'krysiot',
                theme: Provider.of<GlobalData>(context,listen: false).globalTheme,
                home: MyHomePage(),
            );
          },
    
    
        ));
      }
    }

切换主题

void changeTheme(context){
      Provider.of<GlobalData>(context,listen: false).changeThemeMode();
    }

![20210811150645915.gif][]

[https_api.flutter.dev_flutter_material_ThemeData_ThemeData.html]: https://api.flutter.dev/flutter/material/ThemeData/ThemeData.html
[20210811150645915.gif]: /images/20220829/82971e4a1a694a42830929509a2d64d2.png