矿小助拥有三种主题，实现起来非常复杂，总结起来就更不用说了，头皮发麻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> {@overrideWidget build(BuildContext context) {return FlyApp(showBackgroundImg: true,//显示背景图片child: Scaffold(…………………………),);}
}

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

组件

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

组件	功能	主要包含组件
FlyApp	最上层组件，内置MaterialApp用于配置ThemeMode	FlyTheme
FlyContainer	一个容器，能够自动根据主题配置改变外观。	FlyBackground、Container
FlyText	文字组件	Text
FlyBackground	放在FlyImage上层，用于为背景图添加模糊透明效果	FlyImage
FlyImage	背景图	Image
ThemeProvider	核心组件，用于跨组件共享，使用Provider实现	Provider
FlyTheme	主题配置	ThemeData

例子

样例视频：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> {@overrideWidget 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,//FlyTextchild: 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,//这里的主题色需要手动setStateinactiveColor: Colors.black12,value: value,min: min,max: max,onChanged: onChanged,));}
}

矿小助全局主题 | 一个插件实现网易云音乐主题效果 | Flutter相关推荐

Chrome插件：网易云音乐听歌识曲
大家好,我是若川.持续组织了8个月源码共读活动,感兴趣的可以点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
推荐一个高大上的网易云音乐命令行播放工具：musicbox
网易云音乐上有很多适合程序猿的歌单,但是今天文章介绍的不是这些适合程序员工作时听的歌,而是一个用Python开发的开源播放器,专门适用于网易云音乐的播放.这个播放器的名称为MusicBox, 特色是用 ...
自定义插件实现网易云音乐首页图片轮播
编写html界面 <!DOCTYPE html> <html><head><meta charset="utf-8" /><t ...
一个开源的网易云音乐api项目
昨天在Github上发现了一个开源的音乐api项目,restful风格,Json格式,提供的功能真的是史上最全,足够你开发一款属于自己的客户端了.而且作者非常贴心,除了开源了这个项目外还提供了一份详细 ...
实现一个网易云音乐的 BottomSheetDialog
作者:林冠宏 / 指尖下的幽灵掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...
taro 重新加载小程序_taro-music一款开源网易云音乐小程序
简介 taro-music 是基于taro + taro-ui + redux + react-hooks + typescript 开发的网易云音乐小程序,目前正在使用react-hooks重构中. ...
python获取键盘输入能不能不按回车键_Github获8300星！用Python开发的一个命令行的网易云音乐...
最近在逛Github发现了一个非常有趣的库musicbox,是用纯Python打造的,收获了8300颗星.Python语言简单易学,好玩有趣,身边越来越多的小伙伴都开始学习Python.她的魅力非常大 ...
我做了一个网易云音乐外链播放器的Vue组件，很nice
话不多说,上视频: https://www.bilibili.com/video/BV1p44y1M7KC/ 介绍起因是我的一个小项目用到了网易云音乐的外链播放器:于是将它从项目里剥离出来做成一个V ...
一个人竟然撸了一个网易云音乐云村
[公众号回复 "1024",免费领取程序员赚钱实操经验] 大家好,我是章鱼猫. 今天推荐的这个项目是「netease-cloud-music-community」,是一个参照网易云 ...

矿小助全局主题 | 一个插件实现网易云音乐主题效果 | Flutter

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

导入组件

初始化

使用

组件

例子

矿小助全局主题 | 一个插件实现网易云音乐主题效果 | Flutter相关推荐

最新文章

热门文章

矿小助 全局主题 | 一个插件实现网易云音乐主题效果 | Flutter

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

导入组件

初始化

使用

组件

例子

矿小助 全局主题 | 一个插件实现网易云音乐主题效果 | Flutter相关推荐

最新文章

热门文章

矿小助全局主题 | 一个插件实现网易云音乐主题效果 | Flutter

矿小助全局主题 | 一个插件实现网易云音乐主题效果 | Flutter相关推荐