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

使用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