做为一款App,自定义主题色是必不可少的。下面是关于我开发Flutter主题色过程。
首先provider包
https://pub.dev/packages/provider#-readme-tab-
Provider(跨组件状态共享)为Flutter定义主题色提供了方法。
主题色
了解主题色,首先需要知道Flutter定义主题的方法
我们可以在main.dart 内使用
return MaterialApp(
// 初始化路由
initialRoute: '/',
// 定义路由
onGenerateRoute: onGenerateRoute,
// 测试书签
debugShowCheckedModeBanner: false,
// 网格
debugShowMaterialGrid: false,
//theme关于默认状态下的主题管理
theme: ThemeData(
//主题色
primaryColor:Colors.yellow,
),
//当手机处于夜间模式时,优先执行darkTheme
darkTheme: ThemeData(
primaryColor:Colors.black,
)
);
了解上面的基础之后开始设定主题色
我的方法是新建了自己的theme.dart
theme.dart页面
首先创建需要的主题色List
List<Color> colorsList = [
Colors.blue,
Colors.lightBlue,
Colors.teal,
Colors.pink,
Colors.yellow,
Colors.orange,
Colors.red,
Colors.green,
Colors.cyan,
Colors.grey[900],
Colors.black,
];
全部代码
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
class Counter with ChangeNotifier {
int _countColor;
Counter( this._countColor);
//change themecolor
void countColors(int index) {
_countColor = index;
notifyListeners();
}
get countColor => _countColor;
}
List<Color> colorsList = [
Colors.blue,
Colors.lightBlue,
Colors.teal,
Colors.pink,
Colors.yellow,
Colors.orange,
Colors.red,
Colors.green,
Colors.cyan,
Colors.grey[900],
Colors.black,
];
这个页面的主要作用是监听选择数组的元素
Colors.dart页面实现切换主题
import 'package:flutter/material.dart';
import 'package:flag/Theme/theme.dart';
import 'package:provider/provider.dart';
import 'package:flag/routers/shareApi.dart';
class StyleColorPage extends StatefulWidget {
StyleColorPage({Key key}) : super(key: key);
StyleColorPageState createState() => StyleColorPageState();
}
class StyleColorPageState extends State<StyleColorPage> {
String title;
int ids;
_numcheck() async {
int a = await getInt("themecolor");
if (a == null) {
ids = 0;
} else {
setState(() {
ids = a;
});
}
}
void initState() {
super.initState();
this._numcheck();
}
StyleColorPageState({this.title = "主题风格"});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: ListView.builder(
itemCount: colorsList.length,
itemBuilder: (context, index) {
return ListTile(
leading: Container(
color: colorsList[index],
width: 40,
height: 40,
child: ids == index ? Icon(Icons.check) : Center()),
title: colorsListText[index],
onTap: () {
//更换主题
Provider.of<Counter>(context).countColors(index);
},
);
}));
}
}
我们通过ListTile的onTap方法选定,
然后用 Provider.of<Counter>(context).countColors(index)注入你选择的index值
注意需要import theme.dart页面
最后是main.dart 里面
runApp(ChangeNotifierProvider<Counter>.value(
notifier: Counter(index), child: MyApp()));
primaryColor: colorsList[Provider.of<Counter>(context).countColor],