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進行編碼，將對象傳遞給方法
    prefs.setString(key, value);
  }

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

2. 　定義provide 狀態管理

　index.dart

　該dart文件中涉及的Provide狀態管理參考：  http://www.javashuo.com/article/p-wewsrbvt-ce.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