应用 flutter 写的电影播放软件:https://github.com/Mockingbird1234/skapp
开源不易,感兴趣的小伙伴给个 star 吧。
在 flutter 减少黑夜模式和换肤其实很简略,这里须要联合 mobx 一起应用,对于在 flutter 中应用 mobx,能够参考我的这篇文章,https://www.jianshu.com/p/3bf5687c58c0。
实现原理就是在全局中存储以后皮肤模式,应用 MaterialApp 的 theme 属性实现换肤。
在 store 中定义模式
首先在 store 中定义全局变量,局部代码如下:
var colorList = [
Colors.red,
Colors.pink,
Colors.purple,
Colors.lightBlue,
Colors.cyan,
Colors.teal,
Colors.green,
Colors.lime,
Colors.amber,
Colors.orange,
Colors.deepOrange,
Colors.blueGrey,
];
Future getThemeIndex() async {SharedPreferences prefs = await SharedPreferences.getInstance();
int themeIndex = prefs.getInt('themeIndex') ?? 0;
return themeIndex;
}
@observable
Color theme; // 在主题色
@computed
Brightness get themeMode {return isDark ? Brightness.dark : Brightness.light;}
@observable
bool isDark;
这里 colorList 用于寄存色彩,themeIndex 应用 SharedPreferences 寄存色彩索引,独自定义 isDark 变量用于判断以后是否是暗黑模式。
应用 Provider 注入 Global
接下来在 main.dart 中注入全局变量,局部代码如下:
runApp(RestartWidget(
child: MultiProvider(
providers: [
Provider<Global>(create: (_) => Global(prefs),
),
],
child: MyApp(),),
));
@override
Widget build(BuildContext context) {final Global _global = Provider.of<Global>(context);
_global.getAppConfig();
_global.getAppAds();
Upgrader().clearSavedSettings();
// Upgrader().isUpdateAvailable();
final cfg =
AppcastConfiguration(url: updataAppUrl, supportedOS: ['android']);
_upgradeApp(_global);
return Observer(builder: (_) => MaterialApp(
theme: ThemeData(
brightness: _global.themeMode,
primarySwatch: _global.theme,
platform: TargetPlatform.iOS,
),
home: Scaffold(
resizeToAvoidBottomPadding: false,
backgroundColor: Theme.of(context).cardColor,
body: _global.updataApp
? UpgradeAlert(
appcastConfig: cfg,
title: '发现新版本',
prompt: '',
showLater: false,
showIgnore: false,
buttonTitleUpdate: '立刻更新',
debugAlwaysUpgrade: true,
child: Center(
child: Container(
width: 0,
height: 0,
),
)
// debugLogging: true,
)
: SplashWidget(),),
onGenerateRoute: Application.router.generator,
navigatorObservers: [AppAnalysis()],
),
);
}
应用 final Global _global = Provider.of<Global>(context);
便能够获取在 store 中定义的变量以及变量的值。
实现换肤
以上只是初始化的时候展现的皮肤,接下来介绍如何通过点击实现动静换肤。
色彩抉择界面应用了 flutter_material_color_picker: ^1.0.5
这个插件,局部代码如下:
MaterialColorPicker(
elevation: 1,
circleSize: 36,
iconSelected: Icons.color_lens,
allowShades: false,
spacing: 16,
onMainColorChange: (Color color) {_global.changeTheme(color);
},
selectedColor: _global.theme,
colors: _global.colorList,
),
次要看 onMainColorChange 办法,当点击了一个色彩后会执行此办法,触发 _global.changeTheme(color);
执行,这些就实现了换肤性能。
以上只是列出了我在 skapp 我的项目中应用换肤的局部代码,具体实现能够到 github 下载源码学习交换:https://github.com/Mockingbird1234/skapp