矿小助拥有三种主题，实现起来非常复杂，总结起来就更不用说了，头皮发麻QAQ。

因此，花了半天时间将其拆分出来，做成插件，开源给大家使用。具体的细节大家自己研究吧（溜）。

第一次做插件，难免考虑不周，还请谅解

文章接上回 1 基础配置 | 巧妙利用代码补全 | Flutter

快速实现网易云音乐式主题效果

pub插件地址：https://pub.dev/packages/flytheme

github仓库地址：https://github.com/cnatom/flytheme

本插件是从矿小助App中拆分出来的，优化了很多细节，更加简单易用。

内置持久化存储，使用share_preference实现。

主题状态跨组件共享使用Provider实现。

样例视频：https://www.bilibili.com/video/BV13f4y137Kx?spm_id_from=333.999.0.0

导入组件

首先，导入flytheme到pubspec.yaml文件

flytheme: any

初始化

使用了share_preference对主题配置进行持久化存储，所以要在runApp()前进行初始化

void main() async{
await FlyApp.init();//必须要添加
runApp(MyApp());
}

使用

在入口处添加FlyApp

class Example extends StatefulWidget {
@override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
@override
Widget build(BuildContext context) {
return FlyApp(
showBackgroundImg: true,//显示背景图片
child: Scaffold(
…………………………
),
);
}
}

FlyApp内置了MaterialApp，因此不需要再重复添加。

组件

所有的组件都需要在FlyApp的子树内使用。

例子

样例视频：https://www.bilibili.com/video/BV13f4y137Kx?spm_id_from=333.999.0.0

import 'package:flutter/material.dart';
import 'package:flytheme/app.dart';
import 'package:flytheme/module/container.dart';
import 'package:flytheme/module/text.dart';
import 'package:flytheme/provider.dart';
void main() async {
//必须要添加
await FlyApp.init();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return FlyApp(
showBackgroundImg: true,
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: FlyText("FlyTheme插件示例"),
),
body: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Column(
children: [
_buildButton("白色主题", onTap: () {
//切换 白色主题/透明主题
FlyApp.setThemeWhite();
}),
_buildButton("黑色主题", onTap: () {
//切换 黑色主题/透明主题
FlyApp.setThemeBlack();
}),
_buildButton("修改背景图片", onTap: () {
FlyApp.setBackImage();
}),
//修改主题色
FlyContainer(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
child: _buildColorSelector(),
),
_buildSliver("卡片透明",
value: FlyApp.transCard,//获取透明度
onChanged: (value) {
setState(() {
FlyApp.transCard = value;//设置卡片透明度
});
}),
_buildSliver("背景模糊",
value: FlyApp.blurBack,//获取透明度
max: 20,
onChanged: (value) {
setState(() {
FlyApp.blurBack = value;//设置卡片透明度
});
}),
_buildSliver("背景透明",
value: FlyApp.transBack,//获取透明度
onChanged: (value) {
setState(() {
FlyApp.transBack = value;//设置卡片透明度
});
}),
],
),
),
),
);
}
Widget _buildColorCir(Color color){
return InkWell(
onTap: (){
//更改主题色
setState(() {
FlyApp.colorMain = color;
});
},
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: color
),
),
);
}
Widget _buildButton(String text, {GestureTapCallback onTap}) {
return InkWell(
onTap: onTap,
//FlyContainer会根据主题配置变换
child: FlyContainer(
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
child: Row(
children: [
//FlyText会根据主题配置变换
FlyText(
text,
fontSize: 17,
)
],
),
),
);
}
Widget _buildTitleContainer(String title,
{@required Widget child, GestureTapCallback onTap}) {
return InkWell(
onTap: onTap,
//FlyContainer作为背景板
child: FlyContainer(
padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
margin: EdgeInsets.all(10),
alignment: Alignment.center,
child: Row(
children: [
Expanded(
flex: 2,
//FlyText
child: FlyText(
title,
fontSize: 17,
),
),
Expanded(
flex: 5,
child: child,
),
],
),
),
);
}
Widget _buildColorSelector(){
List<Color> themeColors = [
Color.fromARGB(255, 0, 196, 169),
Color.fromARGB(255, 0, 186, 253),
Color.fromARGB(255, 255, 64, 58),
Color.fromARGB(255, 255, 116, 152),
Color.fromARGB(255, 0, 109, 252),
Color.fromARGB(255, 255, 206, 38),
Color.fromARGB(255, 48, 54, 56),
Color.fromARGB(255, 200, 200, 200),
];
return Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: themeColors.map((item){
return _buildColorCir(item);
}).toList(),
),
);
}
Widget _buildSliver(String title,
{@required double value,
double max = 1.0,
double min = 0.0,
@required ValueChanged<double> onChanged}) {
return _buildTitleContainer(title,
child: Slider(
activeColor: ThemeProvider().colorMain,//这里的主题色需要手动setState
inactiveColor: Colors.black12,
value: value,
min: min,
max: max,
onChanged: onChanged,
));
}
}

最后

以上就是欣喜鼠标最近收集整理的关于矿小助 全局主题 | 一个插件实现网易云音乐主题效果 | Flutter快速实现网易云音乐式主题效果的全部内容，更多相关矿小助内容请搜索靠谱客的其他文章。