在 flutter 中增加黑夜模式以及换肤功能

作者：Mockingbird

来源：SegmentFault 思否社区

---

使用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;  }
@observablebool isDark;

这里colorList用于存放颜色，themeIndex使用SharedPreferences存放颜色索引，单独定义isDark变量用于判断当前是否是暗黑模式。

---

使用Provider注入Global

接下来在main.dart中注入全局变量，部分代码如下：

               

runApp(RestartWidget(    child: MultiProvider(      providers: [        Provider(          create: (_) => Global(prefs),        ),      ],      child: MyApp(),    ),  ));
@override  Widget build(BuildContext context) {    final Global _global = Provider.of(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(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

---

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流。