关于flutter:在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