这里只做了主题颜色的改变。也可以修改其他的ThemeData
Map themeColorMap = {
'gray': Colors.grey,
'blue': Colors.blue,
'blueAccent': Colors.blueAccent,
'cyan': Colors.cyan,
'deepPurple': Colors.purple,
'deepPurpleAccent': Colors.deepPurpleAccent,
'deepOrange': Colors.orange,
'green': Colors.green,
'indigo': Colors.indigo,
'indigoAccent': Colors.indigoAccent,
'orange': Colors.orange,
'purple': Colors.purple,
'pink': Colors.pink,
'red': Colors.red,
'teal': Colors.teal,
'black': Colors.black,
};
定义主题样式的Provider。 数据改变时,使用notifyListeners通知组件更新
import 'package:flutter/material.dart';
class AppInfoProvider with ChangeNotifier {
String _themeColor = '';
String get themeColor => _themeColor;
setTheme(String themeColor) {
_themeColor = themeColor;
notifyListeners();
}
}
在main.dart中设置全局数据的主题样式。有多个状态管理就使用MultiProvider,单个的使用Provider.value就行了。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final router = Router();
Routers.configureRouters(router);
Application.router = router;
Color _themeColor;
return MultiProvider(
providers: [
ChangeNotifierProvider.value(value: AppInfoProvider())
],
child: Consumer(
builder: (context, appInfo, _) {
String colorKey = appInfo.themeColor;
if (themeColorMap[colorKey] != null) {
_themeColor = themeColorMap[colorKey];
}
return MaterialApp(
onGenerateRoute: Application.router.generator,
theme: ThemeData.light().copyWith(
primaryColor: _themeColor,
accentColor: _themeColor,
indicatorColor: Colors.white
),
home: SplashPage(),
);
},
),
);
}
}
设置全局的主题样式
Provider.of(context).setTheme(colorKey);
编写工具类,把shared_preferences做成全局单例模式。
import 'dart:convert';
import 'dart:async';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:synchronized/synchronized.dart';
class SpHelper {
static SpHelper _intance;
static SharedPreferences _prefs;
static Lock _lock = Lock();
static Future getInstance() async {
if (_intance == null) {
await _lock.synchronized(() async {
if (_intance == null) {
// 保持本地实例直到完全初始化。
var instance = SpHelper._();
await instance._init();
_intance = instance;
}
});
}
return _intance;
}
// 私有构造函数
SpHelper._();
Future _init() async {
_prefs = await SharedPreferences.getInstance();
}
/// put object.
static Future putObject(String key, Object value) {
if (_prefs == null) return null;
return _prefs.setString(key, value == null ? "" : json.encode(value));
}
/// get obj.
static T getObj(String key, T f(Map v), {T defValue}) {
Map map = getObject(key);
return map == null ? defValue : f(map);
}
/// get object.
static Map getObject(String key) {
if (_prefs == null) return null;
String _data = _prefs.getString(key);
return (_data == null || _data.isEmpty) ? null : json.decode(_data);
}
/// put object list.
static Future putObjectList(String key, List
页面初始化加载时,从shared_preferences获取主题样式。一般写在main.dart或者闪屏页面
@override
void initState() {
super.initState();
_initAsync();
}
void _initAsync() async {
await SpHelper.getInstance();
String colorKey = SpHelper.getString(Constant.key_theme_color, defValue: 'blue');
// 设置初始化主题颜色
Provider.of(context).setTheme(colorKey);
}
设置主题样式
setState(() {
_colorKey = key;
});
SpHelper.putString(Constant.key_theme_color, key);
Provider.of(context).setTheme(key);
设置页面
import 'package:flutter/material.dart';
import 'package:music_app/common/sp_helper.dart';
import 'package:music_app/router/application.dart';
import 'package:music_app/common/common.dart';
import 'package:provider/provider.dart';
import 'package:music_app/provider/app_info.dart';
class SettingPage extends StatefulWidget {
@override
_SettingPageState createState() => _SettingPageState();
}
class _SettingPageState extends State {
String _colorKey;
@override
void initState() {
super.initState();
_initAsync();
}
_initAsync() async {
setState(() {
_colorKey = SpHelper.getString(Constant.key_theme_color, defValue: 'blue');
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Application.router.pop(context);
},
),
title: Text('设置'),
centerTitle: true,
),
body: ListView(
children: [
ExpansionTile(
leading: Icon(Icons.color_lens),
title: Text('主题'),
initiallyExpanded: true,
children: [
Padding(
padding: EdgeInsets.only(left: 10, right: 10, bottom: 10),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: themeColorMap.keys.map((key) {
Color value = themeColorMap[key];
return InkWell(
onTap: () {
setState(() {
_colorKey = key;
});
SpHelper.putString(Constant.key_theme_color, key);
Provider.of(context).setTheme(key);
},
child: Container(
width: 40,
height: 40,
color: value,
child: _colorKey == key ? Icon(Icons.done, color: Colors.white,) : null,
),
);
}).toList(),
),
)
],
),
ListTile(
leading: Icon(Icons.language),
title: Text('多语言'),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('跟随系统', style: TextStyle(
fontSize: 14.0,
color: Colors.grey,
)),
Icon(Icons.keyboard_arrow_right)
],
),
)
],
),
);
}
}