专栏首页01二进制快速适配 Flutter 之深色模式

快速适配 Flutter 之深色模式

深色模式(Dark Mode),也被称为暗黑模式,是一种高对比度,或者反色模式的显示模式,开启之后在夜间可以缓解疲劳,更易于阅读,同时也能在一定程度上达到省电的效果。iOS和安卓分别从 iOS 13 和 Android 10(不同厂商不尽相同,部分 Android 9 也支持) 开始加入深色模式的支持,各大浏览器纷纷开始支持深色模式,强如微信也终于在 iOS 客户端 7.0.12、Android 客户端 7.0.13 支持了深色模式,等网页端适配深色模式后将更进一步提高用户体验的一致性。

Flutter作为一个先进的跨平台框架,自然也考虑到了深色模式的使用,我在上一篇文章《Flutter主题切换——让你的APP也能一键换肤》[1]的结尾提到了Brightness brightness属性可用于适配跟随系统的DarkMode,我们可以直接在MaterialAppdarkTheme选项中使用

MaterialApp( 
    theme: ThemeData( 
        brightness: Brightness.light, 
        primaryColor: Colors.blue, 
    ), 
    darkTheme: ThemeData( 
        brightness: Brightness.dark, 
    ),
);

也可以写成:

darkTheme: ThemeData.dark()

这样写的好处是,用户无需单独设置深/浅色模式,完全根据系统设置来切换。

但白天不懂夜的黑,有的人就是喜欢一套深色主题用一天,这时就需要用户可以手动开启深色模式了。

我们先来看下实现的效果:

手动开启深色模式

其实思路和上一篇文章类似,通过shared_preferences[2]保存用户设置,通过Provider[3]实现状态管理,这两个依赖的使用我在上一篇文章中已经介绍了,这里就不多说了。详情点击?Flutter主题切换——让你的APP也能一键换肤[4]。

添加依赖

我们在pubspec.yaml文件中添加如下内容:

provider: ^4.0.5
flustars: ^0.2.6+1

深色模式状态管理类

import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:flutterchallenge/constant.dart';

class DarkModeProvider with ChangeNotifier {
  /// 深色模式 0: 关闭 1: 开启 2: 随系统
  int _darkMode;

  int get darkMode => _darkMode;

  void changeMode(int darkMode) async {
    _darkMode = darkMode;

    notifyListeners();
    SpUtil.putInt(SpConstant.DARK_MODE, darkMode);
  }
}

我们通过changeMode()函数来进行模式的切换,其中notifyListeners();用于通知顶层容器状态的变化,SpUtil.putInt(SpConstant.DARK_MODE, darkMode);用于保存用户设置。

修改MaterialApp

接下来我们需要在顶层容器中配置我们的状态管理类,和上文类似,这里同样使用了MultiProvider

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: DarkModeProvider()),
      ],
      child: Consumer<DarkModeProvider>(
        builder: (context, darkModeProvider, _) {
          return darkModeProvider.darkMode == 2
              ? MaterialApp(
                  title: 'Flutter Demo',
                  theme: ThemeData(
                    primarySwatch: Colors.blue,
                  ),
                  darkTheme: ThemeData.dark(),
                  home: MyHomePage(title: 'Flutter Challenge Demo'),
                )
              : MaterialApp(
                  title: 'Flutter Demo',
                  theme: darkModeProvider.darkMode == 1
                      ? ThemeData.dark()
                      : ThemeData(
                          primarySwatch: Colors.blue,
                        ),
                  home: MyHomePage(title: 'Flutter Challenge Demo'),
                );
        },
      ),
    );
  }
}

如果手动控制是否开启夜间模式,可以设置MaterialApptheme选项为ThemeData.dark()

theme: ThemeData.dark()

因为需要同时保留随系统自动切换与手动切换,而darkTheme选项和theme又有冲突,所以这里需要根据darkModeProvider.darkMode的取值来渲染不同的MaterialApp,如果是手动模式再根据darkModeProvider.darkMode的取值来渲染不同的theme

选择深色模式

接下来如果想要切换深色模式,我们只需要执行下面这行代码即可。

Provider.of<DarkModeProvider>(context, listen: false).changeMode(1);

其中,0表示浅色,1表示深色,2表示跟随系统。

至此,本文内容结束,这里我们头脑风暴一下,能否将上文中提到的主题选择和本文的深色模式结合起来呢?欢迎各位在评论区留言。

本文分享自微信公众号 - 01二进制(gh_d1999add1857),作者:雇个城管打天下

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 写一款小众的 flutter 图标包

    你需要做的第一件事就是找到一个包含 “.ttf” 文件的开源图标库。那 “.ttf” 是什么文件?

    出其东门
  • 前端 vs 后端:哪一个适合你?

    经常会有初学者来问我刚开始学习编程的时候应该学些什么?问这个问题就跟一个医学生询问应该专注研究哪个领域一样。根本没有一个标准答案。但我还是想提供一些指导,并就这...

    出其东门
  • Leetcode题解——717/844

    由于10, 11两个编码都是以1开头的,这意味着只要是以1开头的后面一个数必定是根这个1一起的字符编码。利用这一点:

    出其东门
  • Asp.NET Core 轻松学-项目目录和文件作用介绍

        上一章介绍了 Asp.Net Core 的前世今生,并创建了一个控制台项目编译并运行成功,本章的内容介绍 .NETCore 的各种常用命令、Asp.Ne...

    梁规晓
  • APP架构设计经验谈:接口的设计

    App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉。

    lyb-geek
  • App架构设计经验谈:接口的设计

    App与服务器的通信接口如何设计得好,需要考虑的地方挺多的,在此根据我的一些经验做一些总结分享,旨在抛砖引玉。

    Keegan小钢
  • 一篇文章教会你利用Python网络爬虫获取电影天堂视频下载链接

    相信大家都有一种头疼的体验,要下载电影特别费劲,对吧?要一部一部的下载,而且不能直观的知道最近电影更新的状态。

    Python进阶者
  • Leetcode 14. Longest Common Prefix

    版权声明:博客文章都是作者辛苦整理的,转载请注明出处,谢谢! https://blog.cs...

    Tyan
  • Java设计模式(六)Adapter适配器模式

    一、场景描述 “仪器数据采集器”包含采集数据以及发送数据给服务器两行为,则可定义“仪器数据采集器”接口,定义两方法“采集数据capture”和“发送数据send...

    用户1637609
  • 安卓开发_浅谈SubMenu(子菜单)

    听着music睡

扫码关注云+社区

领取腾讯云代金券