flutter 自定义主题切换

1. 定义local_srorage.dart文件

　使用Flutter第三方插件shared_preferences实现存储键值对信息

　相关shared_preferences插件可参考: flutter 本地存储 （shared_preferences）

import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';

class LocalStorage {
  static Future get(String key) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getString(key);
  }

  static Future set(String key, String value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString(key, value);
  }

  static Future setJSON(String key, value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    value = json.encode(value); //对value进行编码，将对象传递给json.encode方法
    prefs.setString(key, value);
  }

  static Future remove(String key) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.remove(key);
  }
}

2. 　定义provide 状态管理

　index.dart

　该dart文件中涉及的Provide状态管理参考：  https://www.cnblogs.com/john-hwd/p/10790460.html

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
export 'package:provide/provide.dart';  // 暴露Provider方法,不写此句也可在其他页面再次import

import 'package:flutter_smart_park/untils/local_storage.dart';

class ConfigProvide with ChangeNotifier {
  var parentContext; // 接受Provider所传的context
  increment(context) {  // provider的model
    parentContext = context;
    notifyListeners();
  }

// 主题
  String theme = 'purple';

  Future $getTheme() async {
    String _theme = await LocalStorage.get('theme');
    print('++++++++++++++++++++');
    print(_theme);
    if (_theme != null) {
      $setTheme(_theme);
    }
  }

  Future $setTheme(payload) async {
    theme = payload;
    LocalStorage.set('theme', payload);
    notifyListeners();
  }
}

final providers = Providers()   //将ConfigProvide对象添加进providers
  ..provide(Provider<ConfigProvide>.value(ConfigProvide()));

3. 定义theme.dart

import ......
...    // 引用所需第三方库

Map materialColor = { // 主副颜色
  'purple': {
    "primaryColor": 0xFF7B1FA2,
    "primaryColorLight": 0xFF9C27B0,
  },
  'pink': {
    "primaryColor": 0xFFc2185b,
    "primaryColorLight": 0xFFd81b60,
  },
  'deeppink': {
    "primaryColor": 0xFFf50057,
    "primaryColorLight": 0xFFe91e63,
  },
  'blue': {
    "primaryColor": 0xFF1976D2,
    "primaryColorLight": 0xFF2196F3,
  },
};

class AppTheme {
  static Map mainColor = materialColor['purple'];   // 默认颜色
  static getThemeData(String theme) {  // 获取theme方法： getThemeData();
    mainColor = materialColor[theme];  // 设置主题颜色
    ThemeData themData = ThemeData(
      // scaffoldBackgroundColor: Colors.red, // 页面的背景颜色

      primaryColor: Color(mainColor["primaryColor"]), // 主颜色
      primaryColorLight: Color(mainColor["primaryColorLight"]),
      // 按钮颜色
      buttonTheme: ButtonThemeData(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5.0),
        ),
        textTheme: ButtonTextTheme.normal,
        buttonColor: Color(mainColor["primaryColor"]),
      ),
      // 小部件的前景色（旋钮，文本，过度滚动边缘效果等）。
      accentColor: Color(mainColor["primaryColor"]),

      // appbar样式
      appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(color: Colors.white),
        textTheme: TextTheme(
          title: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
          ),
        ),
      ),

      // 图标样式
      iconTheme: IconThemeData(
        color: Color(mainColor["primaryColor"]),
      ),

      // 用于自定义对话框形状的主题。
      dialogTheme: DialogTheme(
        backgroundColor: Colors.white,
        titleTextStyle: TextStyle(
          fontSize: 18.0,
          color: Colors.black87,
        ),
      ),
    );
    return themData;
  }
}

　ThemeData属性详解：   https://www.jianshu.com/p/059c5794b29c

4. main.dart 应用

import 'package:flutter/material.dart';
import 'package:flutter_smart_park/config/theme.dart' show AppTheme; //主题

import 'package:flutter_smart_park/pages/page.dart';
import 'package:flutter_smart_park/common/common.dart';

void main() async {
  runApp(ProviderNode(child: MyApp(), providers: providers));  //将状态放入顶层
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Provide.value<ConfigProvide>(context).$getTheme();  //修改当前主题
    return Provide<ConfigProvide>( // 使用主题
      builder: (context, child, configProvide) {
        return MaterialApp(
          title: '智慧园区',
          debugShowCheckedModeBanner: false,  //调试显示检查模式横幅
          onGenerateRoute: Routes.router.generator, //生成路由
          theme: AppTheme.getThemeData(configProvide.theme),
          home: Pages(),
        );
      },
    );
  }
}

　MaterialApp 详解： https://www.jianshu.com/p/57c7d66c7688