在 flutter 中增加黑夜模式以及換膚功能

作者：Mockingbird

來源：SegmentFault 思否社區(qū)

使用flutter寫的電影播放軟件：https://github.com/Mockingbird1234/skapp

開源不易，感興趣的小伙伴給個(gè)star吧。

在flutter增加黑夜模式和換膚其實(shí)很簡單，這里需要結(jié)合mobx一起使用，關(guān)于在flutter中使用mobx，可以參考我的這篇文章，https://www.jianshu.com/p/3bf5687c58c0。

實(shí)現(xiàn)原理就是在全局中存儲當(dāng)前皮膚模式，使用MaterialApp的theme屬性實(shí)現(xiàn)換膚。

在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存放顏色索引，單獨(dú)定義isDark變量用于判斷當(dāng)前是否是暗黑模式。

使用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: '發(fā)現(xiàn)新版本',                  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中定義的變量以及變量的值。

實(shí)現(xiàn)換膚

以上只是初始化的時(shí)候展示的皮膚，接下來介紹如何通過點(diǎn)擊實(shí)現(xiàn)動(dòng)態(tài)換膚。

顏色選擇界面使用了flutter_material_color_picker: ^1.0.5這個(gè)插件，部分代碼如下：

? ? ? ? ? ? ? ?

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方法，當(dāng)點(diǎn)擊了一個(gè)顏色后會執(zhí)行此方法，觸發(fā)_global.changeTheme(color);執(zhí)行，這些就實(shí)現(xiàn)了換膚功能。

以上只是列出了我在skapp項(xiàng)目中使用換膚的部分代碼，具體實(shí)現(xiàn)可以到github下載源碼學(xué)習(xí)交流：https://github.com/Mockingbird1234/skapp