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