Github客户端示例

本章新建一个Flutter工程，实现一个简单的Github客户端。这个实例的主要目标有两个：

  1. 带领读者了解如何使用Flutter来开发一个完整APP，了解Flutter应用开发流程及工程结构等。
  2. 对前面章节所学内容的一个应用及总结。

需要注意的是，由于Github本身功能非常多，我们的焦点并不是去实现Github的所有业务功能。因此，我们只需要实现一个APP的骨架，能达到上面这两点即可。下面对我们要实现的功能如下：

  1. 实现Github账号登录、退出登录功能
  2. 登录后可以查看自己的项目主页
  3. 支持换肤
  4. 支持多语言
  5. 登录状态可以持久化；

要实现上面这些功能会涉及到如下技术点：

  1. 网络请求；需要请求Github API。
  2. Json转Dart Model类；
  3. 全局状态管理；语言、主题、登录态等都需要全局共享。
  4. 持久化存储；保存登录信息，用户信息等。
  5. 支持国际化、Intl包的使用

现在，目标已经确定，在接下来章节中，我们将分模块一步一步实现上述功能。

Flutter APP代码结构

我们先来创建一个全新的Flutter工程，命名为”github_client_app”；创建新工程的步骤视读者使用的编辑器而定，都比较简单，在此不再赘述。创建完成后，工程结构如下：

  1. github_client_app
  2. ├── android
  3. ├── ios
  4. ├── lib
  5. └── test

由于我们需要使用外部图片和Icon资源，所以我们在项目根目录下分别创建“imgs”和“fonts”文件夹，前者用于保存图片，后者用于保存Icon文件。关于图片和Icon，读者可以参考第三章中相应的内容。
由于在网络数据传输和持久化时，我们需要通过Json来传输、保存数据；但是在应用开发时我们又需要将Json转成Dart Model类，现在我们使用在第十一章中“Json转Model”小节中介绍的方案，所以，我们需要在根目录下再创建一个用于保存Json文件的“jsons”文件夹。
多语言支持我们使用第十三章“国际化”中介绍的方案，所以还需要在根目录下创建一个“l10n”文件夹，用于保存各国语言对应的arb文件。
现在工程目录变为：

  1. github_client_app
  2. ├── android
  3. ├── fonts
  4. ├── l10n-arb
  5. ├── imgs
  6. ├── ios
  7. ├── jsons
  8. ├── lib
  9. └── test

由于我们的Dart代码都在“lib”文件夹下，笔者根据技术选型和经验在lib文件下创建了如下目录：

  1. lib
  2. ├── common
  3. ├── l10n
  4. ├── models
  5. ├── states
  6. ├── routes
  7. └── widgets
文件夹 作用
common 一些工具类，如通用方法类、网络接口类、保存全局变量的静态类等
l10n 国际化相关的类都在此目录下
models Json文件对应的Dart Model类会在此目录下
states 保存APP中需要跨组件共享的状态类
routes 存放所有路由页面类
widgets APP内封装的一些Widget组件都在该目录下

注意，使用不同的框架或技术选型会对代码有不同的组织方式，因此，本节介绍的代码组织结构并不是固定或者“最佳”的，在实战中，读者可以自己根据情况调整源码结构。但是无论采取何种源码组织结构，清晰和解耦都是一个通用原则，我们应该让自己的代码结构清晰，以便交流和维护。
赏

Model类定义

本节我们先梳理一下APP中将用到的数据，然后生成相应的Dart Model类。Json文件转Dart Model的方案采用前面介绍过的 json_model 包方案

Github账号信息

登录Github后，我们需要获取当前登录者的Github账号信息，Github API接口返回Json结构如下：

  1. {
  2.   "login": "octocat", //用户登录名
  3.   "avatar_url": "https://github.com/images/error/octocat_happy.gif", //用户头像地址
  4.   "type": "User", //用户类型，可能是组织
  5.   "name": "monalisa octocat", //用户名字
  6.   "company": "GitHub", //公司
  7.   "blog": "https://github.com/blog", //博客地址
  8.   "location": "San Francisco", // 用户所处地理位置
  9.   "email": "octocat@github.com", // 邮箱
  10.   "hireable": false,
  11.   "bio": "There once was...", // 用户简介
  12.   "public_repos": 2, // 公开项目数
  13.   "followers": 20, //关注该用户的人数
  14.   "following": 0, // 该用户关注的人数
  15.   "created_at": "2008-01-14T04:33:35Z", // 账号创建时间
  16.   "updated_at": "2008-01-14T04:33:35Z", // 账号信息更新时间
  17.   "total_private_repos": 100, //该用户总的私有项目数(包括参与的其它组织的私有项目)
  18.   "owned_private_repos": 100 //该用户自己的私有项目数
  19.   ... //省略其它字段
  20. }

我们在“jsons”目录下创建一个“user.json”文件保存上述信息。

API缓存策略信息

由于Github服务器在国内访问速度较慢，我们对Github API应用一些简单的缓存策略。我们在“jsons”目录下创建一个“cacheConfig.json”文件缓存策略信息，定义如下：

  1. {
  2.   "enable":true, // 是否启用缓存
  3.   "maxAge":1000, // 缓存的最长时间，单位（秒）
  4.   "maxCount":100 // 最大缓存数
  5. }

用户信息

用户信息(Profile)应包括如下信息：

  1. Github账号信息；由于我们的APP可以切换账号登录，且登录后再次打开则不需要登录，所以我们需要对用户账号信息和登录状态进行持久化。
  2. 应用使用配置信息；每一个用户都应有自己的APP配置信息，如主题、语言、以及数据缓存策略等。
  3. 用户注销登录后，为了便于用户在退出APP前再次登录，我们需要记住上次登录的用户名。

需要注意的是，目前Github有三种登录方式，分别是账号密码登录、oauth授权登录、二次认证登录；这三种登录方式的安全性依次加强，但是在本示例中，为了简单起见，我们使用账号密码登录，因此我们需要保存用户的密码。

注意：在这里需要提醒读者，在登录场景中，保护用户账号安全是一个非常重要且永恒的话题，在实际开发中应严格杜绝直接明文存储用户账密的行为。

我们在“jsons”目录下创建一个“profile.json”文件，结构如下：

  1. {
  2.   "user":"$user", //Github账号信息，结构见"user.json"
  3.   "token":"", // 登录用户的token(oauth)或密码
  4.   "theme":5678, //主题色值
  5.   "cache":"$cacheConfig", // 缓存策略信息，结构见"cacheConfig.json"
  6.   "lastLogin":"", //最近一次的注销登录的用户名
  7.   "locale":"" // APP语言信息
  8. }

项目信息

由于APP主页要显示其所有项目信息，我们在“jsons”目录下创建一个“repo.json”文件保存项目信息。通过参考Github 获取项目信息的API文档，定义出最终的“repo.json”文件结构，如下：

  1. {
  2.   "id": 1296269,
  3.   "name": "Hello-World", //项目名称
  4.   "full_name": "octocat/Hello-World", //项目完整名称
  5.   "owner": "$user", // 项目拥有者，结构见"user.json"
  6.   "parent":"$repo", // 如果是fork的项目，则此字段表示fork的父项目信息
  7.   "private": false, // 是否私有项目
  8.   "description": "This your first repo!", //项目描述
  9.   "fork": false, // 该项目是否为fork的项目
  10.   "language": "JavaScript",//该项目的主要编程语言
  11.   "forks_count": 9, // fork了该项目的数量
  12.   "stargazers_count": 80, //该项目的star数量
  13.   "size": 108, // 项目占用的存储大小
  14.   "default_branch": "master", //项目的默认分支
  15.   "open_issues_count": 2, //该项目当前打开的issue数量
  16.   "pushed_at": "2011-01-26T19:06:43Z",
  17.   "created_at": "2011-01-26T19:01:12Z",
  18.   "updated_at": "2011-01-26T19:14:43Z",
  19.   "subscribers_count": 42, //订阅（关注）该项目的人数
  20.   "license": { // 该项目的开源许可证
  21.     "key": "mit",
  22.     "name": "MIT License",
  23.     "spdx_id": "MIT",
  24.     "url": "https://api.github.com/licenses/mit",
  25.     "node_id": "MDc6TGljZW5zZW1pdA=="
  26.   }
  27.   ...//省略其它字段
  28. }

生成Dart Model类

现在，我们需要的Json数据已经定义完毕，现在只需要运行json_model package提供的命令来通过json文件生成相应的Dart类：

  1. flutter packages pub run json_model

命令执行成功后，可以看到lib/models文件夹下会生成相应的Dart Model类：

  1. ├── models
  2. │   ├── cacheConfig.dart
  3. │   ├── cacheConfig.g.dart
  4. │   ├── index.dart
  5. │   ├── profile.dart
  6. │   ├── profile.g.dart
  7. │   ├── repo.dart
  8. │   ├── repo.g.dart
  9. │   ├── user.dart
  10. │   └── user.g.dart

数据持久化

我们使用shared_preferences包来对登录用户的Profile信息进行持久化。shared_preferences是一个Flutter插件，它通过Android和iOS平台提供的机制来实现数据持久化。由于shared_preferences的使用非常简单，读者可以自行查看其文档，在此不再赘述。

全局变量及共享状态

应用程序中通常会包含一些贯穿APP生命周期的变量信息，这些信息在APP大多数地方可能都会被用到，比如当前用户信息、Local信息等。在Flutter中我们把需要全局共享的信息分为两类：全局变量和共享状态。全局变量就是单纯指会贯穿整个APP生命周期的变量，用于单纯的保存一些信息，或者封装一些全局工具和方法的对象。而共享状态则是指哪些需要跨组件或跨路由共享的信息，这些信息通常也是全局变量，而共享状态和全局变量的不同在于前者发生改变时需要通知所有使用该状态的组件，而后者不需要。为此，我们将全局变量和共享状态分开单独管理。

15.4.1 全局变量-Global类

我们在“lib/common”目录下创建一个Global类，它主要管理APP的全局变量，定义如下：

  1. // 提供五套可选主题色
  2. const _themes = <MaterialColor>[
  3.   Colors.blue,
  4.   Colors.cyan,
  5.   Colors.teal,
  6.   Colors.green,
  7.   Colors.red,
  8. ];
  9. class Global {
  10.   static SharedPreferences _prefs;
  11.   static Profile profile = Profile();
  12.   // 网络缓存对象
  13.   static NetCache netCache = NetCache();
  14.   // 可选的主题列表
  15.   static List<MaterialColor> get themes => _themes;
  16.   // 是否为release版
  17.   static bool get isRelease => bool.fromEnvironment("dart.vm.product");
  18.   //初始化全局信息，会在APP启动时执行
  19.   static Future init() async {
  20.     _prefs = await SharedPreferences.getInstance();
  21.     var _profile = _prefs.getString("profile");
  22.     if (_profile != null) {
  23.       try {
  24.         profile = Profile.fromJson(jsonDecode(_profile));
  25.       } catch (e) {
  26.         print(e);
  27.       }
  28.     }
  29.     // 如果没有缓存策略，设置默认缓存策略
  30.     profile.cache = profile.cache ?? CacheConfig()
  31.       ..enable = true
  32.       ..maxAge = 3600
  33.       ..maxCount = 100;
  34.     //初始化网络请求相关配置
  35.     Git.init();
  36.   }
  37.   // 持久化Profile信息
  38.   static saveProfile() =>
  39.       _prefs.setString("profile", jsonEncode(profile.toJson()));
  40. }

Global类的各个字段的意义都有注释，在此不再赘述，需要注意的是init()需要在App启动时就要执行，所以应用的main方法如下：

  1. void main() => Global.init().then((e) => runApp(MyApp()));

在此，一定要确保Global.init()方法不能抛出异常，否则 runApp(MyApp())根本执行不到。

15.4.2 共享状态

有了全局变量，我们还需要考虑如何跨组件共享状态。当然，如果我们将要共享的状态全部用全局变量替代也是可以的，但是这在Flutter开发中并不是一个好主意，因为组件的状态是和UI相关，而在状态改变时我们会期望依赖该状态的UI组件会自动更新，如果使用全局变量，那么我们必须得去手动处理状态变动通知、接收机制以及变量和组件依赖关系。因此，本实例中，我们使用前面介绍过的Provider包来实现跨组件状态共享，因此我们需要定义相关的Provider。在本实例中，需要共享的状态有登录用户信息、APP主题信息、APP语言信息。由于这些信息改变后都要立即通知其它依赖的该信息的Widget更新，所以我们应该使用ChangeNotifierProvider，另外，这些信息改变后都是需要更新Profile信息并进行持久化的。综上所述，我们可以定义一个ProfileChangeNotifier基类，然后让需要共享的Model继承自该类即可，ProfileChangeNotifier定义如下：

  1. class ProfileChangeNotifier extends ChangeNotifier {
  2.   Profile get _profile => Global.profile;
  3.   @override
  4.   void notifyListeners() {
  5.     Global.saveProfile(); //保存Profile变更
  6.     super.notifyListeners(); //通知依赖的Widget更新
  7.   }
  8. }

用户状态

用户状态在登录状态发生变化时更新、通知其依赖项，我们定义如下：

  1. class UserModel extends ProfileChangeNotifier {
  2.   User get user => _profile.user;
  3.   // APP是否登录(如果有用户信息，则证明登录过)
  4.   bool get isLogin => user != null;
  5.   //用户信息发生变化，更新用户信息并通知依赖它的子孙Widgets更新
  6.   set user(User user) {
  7.     if (user?.login != _profile.user?.login) {
  8.       _profile.lastLogin = _profile.user?.login;
  9.       _profile.user = user;
  10.       notifyListeners();
  11.     }
  12.   }
  13. }

APP主题状态

主题状态在用户更换APP主题时更新、通知其依赖项，定义如下：

  1. class ThemeModel extends ProfileChangeNotifier {
  2.   // 获取当前主题，如果为设置主题，则默认使用蓝色主题
  3.   ColorSwatch get theme => Global.themes
  4.       .firstWhere((e) => e.value == _profile.theme, orElse: () => Colors.blue);
  5.   // 主题改变后，通知其依赖项，新主题会立即生效
  6.   set theme(ColorSwatch color) {
  7.     if (color != theme) {
  8.       _profile.theme = color[500].value;
  9.       notifyListeners();
  10.     }
  11.   }
  12. }

APP语言状态

当APP语言选为跟随系统（Auto）时，在系通语言改变时，APP语言会更新；当用户在APP中选定了具体语言时（美国英语或中文简体），则APP便会一直使用用户选定的语言，不会再随系统语言而变。语言状态类定义如下：

  1. class LocaleModel extends ProfileChangeNotifier {
  2.   // 获取当前用户的APP语言配置Locale类，如果为null，则语言跟随系统语言
  3.   Locale getLocale() {
  4.     if (_profile.locale == null) return null;
  5.     var t = _profile.locale.split("_");
  6.     return Locale(t[0], t[1]);
  7.   }
  8.   // 获取当前Locale的字符串表示
  9.   String get locale => _profile.locale;
  10.   // 用户改变APP语言后，通知依赖项更新，新语言会立即生效
  11.   set locale(String locale) {
  12.     if (locale != _profile.locale) {
  13.       _profile.locale = locale;
  14.       notifyListeners();
  15.     }
  16.   }
  17. }

网络请求封装

本节我们会基于前面介绍过的dio网络库封装APP中用到的网络请求接口，并同时应用一个简单的缓存策略。下面我们先介绍一下网络接口缓存原理，然后再封装APP的业务请求接口。

15.5.1 网络接口缓存

由于在国内访问Github服务器速度较慢，所以我们应用一些简单的缓存策略：将请求的url作为key，对请求的返回值在一个指定时间段类进行缓存，另外设置一个最大缓存数，当超过最大缓存数后移除最早的一条缓存。但是也得提供一种针对特定接口或请求决定是否启用缓存的机制，这种机制可以指定哪些接口或那次请求不应用缓存，这种机制是很有必要的，比如登录接口就不应该缓存，又比如用户在下拉刷新时就不应该再应用缓存。在实现缓存之前我们先定义保存缓存信息的CacheObject类：

  1. class CacheObject {
  2.   CacheObject(this.response)
  3.       : timeStamp = DateTime.now().millisecondsSinceEpoch;
  4.   Response response;
  5.   int timeStamp; // 缓存创建时间
  6.   @override
  7.   bool operator ==(other) {
  8.     return response.hashCode == other.hashCode;
  9.   }
  10.   //将请求uri作为缓存的key
  11.   @override
  12.   int get hashCode => response.realUri.hashCode;
  13. }

接下来我们需要实现具体的缓存策略，由于我们使用的是dio package，所以我们可以直接通过拦截器来实现缓存策略：

  1. import 'dart:collection';
  2. import 'package:dio/dio.dart';
  3. import '../index.dart';
  4. class CacheObject {
  5.   CacheObject(this.response)
  6.       : timeStamp = DateTime.now().millisecondsSinceEpoch;
  7.   Response response;
  8.   int timeStamp;
  9.   @override
  10.   bool operator ==(other) {
  11.     return response.hashCode == other.hashCode;
  12.   }
  13.   @override
  14.   int get hashCode => response.realUri.hashCode;
  15. }
  16. class NetCache extends Interceptor {
  17.   // 为确保迭代器顺序和对象插入时间一致顺序一致，我们使用LinkedHashMap
  18.   var cache = LinkedHashMap<String, CacheObject>();
  19.   @override
  20.   onRequest(RequestOptions options) async {
  21.     if (!Global.profile.cache.enable) return options;
  22.     // refresh标记是否是"下拉刷新"
  23.     bool refresh = options.extra["refresh"] == true;
  24.     //如果是下拉刷新，先删除相关缓存
  25.     if (refresh) {
  26.       if (options.extra["list"] == true) {
  27.         //若是列表，则只要url中包含当前path的缓存全部删除（简单实现，并不精准）
  28.         cache.removeWhere((key, v) => key.contains(options.path));
  29.       } else {
  30.         // 如果不是列表，则只删除uri相同的缓存
  31.         delete(options.uri.toString());
  32.       }
  33.       return options;
  34.     }
  35.     if (options.extra["noCache"] != true &&
  36.         options.method.toLowerCase() == 'get') {
  37.       String key = options.extra["cacheKey"] ?? options.uri.toString();
  38.       var ob = cache[key];
  39.       if (ob != null) {
  40.         //若缓存未过期，则返回缓存内容
  41.         if ((DateTime.now().millisecondsSinceEpoch - ob.timeStamp) / 1000 <
  42.             Global.profile.cache.maxAge) {
  43.           return cache[key].response;
  44.         } else {
  45.           //若已过期则删除缓存，继续向服务器请求
  46.           cache.remove(key);
  47.         }
  48.       }
  49.     }
  50.   }
  51.   @override
  52.   onError(DioError err) async {
  53.     // 错误状态不缓存
  54.   }
  55.   @override
  56.   onResponse(Response response) async {
  57.     // 如果启用缓存，将返回结果保存到缓存
  58.     if (Global.profile.cache.enable) {
  59.       _saveCache(response);
  60.     }
  61.   }
  62.   _saveCache(Response object) {
  63.     RequestOptions options = object.request;
  64.     if (options.extra["noCache"] != true &&
  65.         options.method.toLowerCase() == "get") {
  66.       // 如果缓存数量超过最大数量限制，则先移除最早的一条记录
  67.       if (cache.length == Global.profile.cache.maxCount) {
  68.         cache.remove(cache[cache.keys.first]);
  69.       }
  70.       String key = options.extra["cacheKey"] ?? options.uri.toString();
  71.       cache[key] = CacheObject(object);
  72.     }
  73.   }
  74.   void delete(String key) {
  75.     cache.remove(key);
  76.   }
  77. }

关于代码的解释都在注释中了，在此需要说明的是dio包的option.extra是专门用于扩展请求参数的，我们通过定义了“refresh”和“noCache”两个参数实现了“针对特定接口或请求决定是否启用缓存的机制”，这两个参数含义如下：

参数名 类型 解释
refresh bool 如果为true，则本次请求不使用缓存，但新的请求结果依然会被缓存
noCache bool 本次请求禁用缓存，请求结果也不会被缓存。

15.5.2 封装网络请求

一个完整的APP，可能会涉及很多网络请求，为了便于管理、收敛请求入口，工程上最好的作法就是将所有网络请求放到同一个源码文件中。由于我们的接口都是请求的Github 开发平台提供的API，所以我们定义一个Git类，专门用于Github API接口调用。另外，在调试过程中，我们通常需要一些工具来查看网络请求、响应报文，使用网络代理工具来调试网络数据问题是主流方式。配置代理需要在应用中指定代理服务器的地址和端口，另外Github API是HTTPS协议，所以在配置完代理后还应该禁用证书校验，这些配置我们在Git类初始化时执行（init()方法）。下面是Git类的源码：

  1. import 'dart:async';
  2. import 'dart:convert';
  3. import 'dart:io';
  4. import 'package:dio/dio.dart';
  5. import 'package:dio/adapter.dart';
  6. import 'package:flutter/material.dart';
  7. import '../index.dart';
  8. class Git {
  9.   // 在网络请求过程中可能会需要使用当前的context信息，比如在请求失败时
  10.   // 打开一个新路由，而打开新路由需要context信息。
  11.   Git([this.context]) {
  12.     _options = Options(extra: {"context": context});
  13.   }
  14.   BuildContext context;
  15.   Options _options;
  16.   static Dio dio = new Dio(BaseOptions(
  17.     baseUrl: 'https://api.github.com/',
  18.     headers: {
  19.       HttpHeaders.acceptHeader: "application/vnd.github.squirrel-girl-preview,"
  20.           "application/vnd.github.symmetra-preview+json",
  21.     },
  22.   ));
  23.   static void init() {
  24.     // 添加缓存插件
  25.     dio.interceptors.add(Global.netCache);
  26.     // 设置用户token（可能为null，代表未登录）
  27.     dio.options.headers[HttpHeaders.authorizationHeader] = Global.profile.token;
  28.     // 在调试模式下需要抓包调试，所以我们使用代理，并禁用HTTPS证书校验
  29.     if (!Global.isRelease) {
  30.       (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
  31.           (client) {
  32.         client.findProxy = (uri) {
  33.           return "PROXY 10.1.10.250:8888";
  34.         };
  35.         //代理工具会提供一个抓包的自签名证书，会通不过证书校验，所以我们禁用证书校验
  36.         client.badCertificateCallback =
  37.             (X509Certificate cert, String host, int port) => true;
  38.       };
  39.     }
  40.   }
  41.   // 登录接口，登录成功后返回用户信息
  42.   Future<User> login(String login, String pwd) async {
  43.     String basic = 'Basic ' + base64.encode(utf8.encode('$login:$pwd'));
  44.     var r = await dio.get(
  45.       "/users/$login",
  46.       options: _options.merge(headers: {
  47.         HttpHeaders.authorizationHeader: basic
  48.       }, extra: {
  49.         "noCache": true, //本接口禁用缓存
  50.       }),
  51.     );
  52.     //登录成功后更新公共头（authorization），此后的所有请求都会带上用户身份信息
  53.     dio.options.headers[HttpHeaders.authorizationHeader] = basic;
  54.     //清空所有缓存
  55.     Global.netCache.cache.clear();
  56.     //更新profile中的token信息
  57.     Global.profile.token = basic;
  58.     return User.fromJson(r.data);
  59.   }
  60.   //获取用户项目列表
  61.   Future<List<Repo>> getRepos(
  62.       {Map<String, dynamic> queryParameters, //query参数，用于接收分页信息
  63.       refresh = false}) async {
  64.     if (refresh) {
  65.       // 列表下拉刷新，需要删除缓存（拦截器中会读取这些信息）
  66.       _options.extra.addAll({"refresh": true, "list": true});
  67.     }
  68.     var r = await dio.get<List>(
  69.       "user/repos",
  70.       queryParameters: queryParameters,
  71.       options: _options,
  72.     );
  73.     return r.data.map((e) => Repo.fromJson(e)).toList();
  74.   }
  75. }

可以看到我们在init()方法中，我们判断了是否是调试环境，然后做了一些针对调试环境的网络配置（设置代理和禁用证书校验）。而Git.init()方法是应用启动时被调用的（Global.init()方法中会调用Git.init()）。
另外需要注意，我们所有的网络请求是通过同一个dio实例（静态变量）发出的，在创建该dio实例时我们将Github API的基地址和API支持的Header进行了全局配置，这样所有通过该dio实例发出的请求都会默认使用者些配置。
在本实例中，我们只用到了登录接口和获取用户项目的接口，所以在Git类中只定义了login(…)和getRepos(…)方法，如果读者要在本实例的基础上扩充功能，读者可以将其它的接口请求方法添加到Git类中，这样便实现了网络请求接口在代码层面的集中管理和维护。

APP入口及主页

本节来介绍一下APP入口及首页。

15.6.1 APP入口

main函数为APP入口函数，实现如下：

  1. void main() => Global.init().then((e) => runApp(MyApp()));

初始化完成后才会加载UI(MyApp)，MyApp 是应用的入口Widget，实现如下：

  1. class MyApp extends StatelessWidget {
  2.   // This widget is the root of your application.
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return MultiProvider(
  6.       providers: <SingleChildCloneableWidget>[
  7.         ChangeNotifierProvider.value(value: ThemeModel()),
  8.         ChangeNotifierProvider.value(value: UserModel()),
  9.         ChangeNotifierProvider.value(value: LocaleModel()),
  10.       ],
  11.       child: Consumer2<ThemeModel, LocaleModel>(
  12.         builder: (BuildContext context, themeModel, localeModel, Widget child) {
  13.           return MaterialApp(
  14.             theme: ThemeData(
  15.               primarySwatch: themeModel.theme,
  16.             ),
  17.             onGenerateTitle: (context){
  18.               return GmLocalizations.of(context).title;
  19.             },
  20.             home: HomeRoute(), //应用主页
  21.             locale: localeModel.getLocale(),
  22.             //我们只支持美国英语和中文简体
  23.             supportedLocales: [
  24.               const Locale('en', 'US'), // 美国英语
  25.               const Locale('zh', 'CN'), // 中文简体
  26.               //其它Locales
  27.             ],
  28.             localizationsDelegates: [
  29.               // 本地化的代理类
  30.               GlobalMaterialLocalizations.delegate,
  31.               GlobalWidgetsLocalizations.delegate,
  32.               GmLocalizationsDelegate()
  33.             ],
  34.             localeResolutionCallback:
  35.                 (Locale _locale, Iterable<Locale> supportedLocales) {
  36.               if (localeModel.getLocale() != null) {
  37.                 //如果已经选定语言，则不跟随系统
  38.                 return localeModel.getLocale();
  39.               } else {
  40.                 Locale locale;
  41.                 //APP语言跟随系统语言，如果系统语言不是中文简体或美国英语，
  42.                 //则默认使用美国英语
  43.                 if (supportedLocales.contains(_locale)) {
  44.                   locale= _locale;
  45.                 } else {
  46.                   locale= Locale('en', 'US');
  47.                 }
  48.                 return locale;
  49.               }
  50.             },
  51.             // 注册命名路由表
  52.             routes: <String, WidgetBuilder>{
  53.               "login": (context) => LoginRoute(),
  54.               "themes": (context) => ThemeChangeRoute(),
  55.               "language": (context) => LanguageRoute(),
  56.             },
  57.           );
  58.         },
  59.       ),
  60.     );
  61.   }
  62. }

在上面的代码中：

  1. 我们的根widget是MultiProvider，它将主题、用户、语言三种状态绑定到了应用的根上，如此一来，任何路由中都可以通过Provider.of()来获取这些状态，也就是说这三种状态是全局共享的！
  2. HomeRoute是应用的主页。
  3. 在构建MaterialApp时，我们配置了APP支持的语言列表，以及监听了系统语言改变事件；另外MaterialApp消费（依赖）了ThemeModel和LocaleModel，所以当APP主题或语言改变时MaterialApp会重新构建
  4. 我们注册了命名路由表，以便在APP中可以直接通过路由名跳转。
  5. 为了支持多语言（本APP中我们支持美国英语和中文简体两种语言）我们实现了一个GmLocalizationsDelegate，子Widget中都可以通过GmLocalizations来动态获取APP当前语言对应的文案。关于GmLocalizationsDelegate和GmLocalizations的实现方式读者可以参考“国际化”一章中的介绍，此处不再赘述。

    15.6.2 主页

    为了简单起见，当APP启动后，如果之前已登录了APP，则显示该用户项目列表；如果之前未登录，则显示一个登录按钮，点击后跳转到登录页。另外，我们实现一个抽屉菜单，里面包含当前用户头像及APP的菜单。下面我们先看看要实现的效果，如图15-1、15-2所示：
    15.创建一个完成的Flutter应用 - 图115.创建一个完成的Flutter应用 - 图2
    我们在“lib/routes”下创建一个“home_page.dart”文件，实现如下：
    1. class HomeRoute extends StatefulWidget {
    2. @override
    3. _HomeRouteState createState() => _HomeRouteState();
    4. }
    5. class _HomeRouteState extends State<HomeRoute> {
    6. @override
    7. Widget build(BuildContext context) {
    8.  return Scaffold(
    9.    appBar: AppBar(
    10.      title: Text(GmLocalizations.of(context).home),
    11.    ),
    12.    body: _buildBody(), // 构建主页面
    13.    drawer: MyDrawer(), //抽屉菜单
    14.  );
    15. }
    16. ...// 省略
    17. }
    上面代码中，主页的标题（title）我们是通过GmLocalizations.of(context).home来获得，GmLocalizations是我们提供的一个Localizations类，用于支持多语言，因此当APP语言改变时，凡是使用GmLocalizations动态获取的文案都会是相应语言的文案，这在前面“国际化”一章中已经介绍过，读者可以前翻查阅。
    我们通过 _buildBody()方法来构建主页内容，_buildBody()方法实现代码如下：
    1. Widget _buildBody() {
    2.  UserModel userModel = Provider.of<UserModel>(context);
    3.  if (!userModel.isLogin) {
    4.    //用户未登录，显示登录按钮
    5.    return Center(
    6.      child: RaisedButton(
    7.        child: Text(GmLocalizations.of(context).login),
    8.        onPressed: () => Navigator.of(context).pushNamed("login"),
    9.      ),
    10.    );
    11.  } else {
    12.    //已登录，则展示项目列表
    13.    return InfiniteListView<Repo>(
    14.      onRetrieveData: (int page, List<Repo> items, bool refresh) async {
    15.        var data = await Git(context).getRepos(
    16.          refresh: refresh,
    17.          queryParameters: {
    18.            'page': page,
    19.            'page_size': 20,
    20.          },
    21.        );
    22.        //把请求到的新数据添加到items中
    23.        items.addAll(data); 
    24.        // 如果接口返回的数量等于'page_size'，则认为还有数据，反之则认为最后一页
    25.        return data.length==20;
    26.      },
    27.      itemBuilder: (List list, int index, BuildContext ctx) {
    28.        // 项目信息列表项
    29.        return RepoItem(list[index]);
    30.      },
    31.    );
    32.  }
    33. }
    34. }
    上面代码注释很清楚：如果用户未登录，显示登录按钮；如果用户已登录，则展示项目列表。这里项目列表使用了InfiniteListView Widget，它是flukit package中提供的。InfiniteListView同时支持了下拉刷新和上拉加载更多两种功能。onRetrieveData 为数据获取回调，该回调函数接收三个参数：
参数名 类型 解释
page int 当前页号
items List 保存当前列表数据的List
refresh bool 是否是下拉刷新触发

返回值类型为bool，为true时表示还有数据，为false时则表示后续没有数据了。onRetrieveData 回调中我们调用Git(context).getRepos(...)来获取用户项目列表，同时指定每次请求获取20条。当获取成功时，首先要将新获取的项目数据添加到items中，然后根据本次请求的项目条数是否等于期望的20条来判断还有没有更多的数据。在此需要注意，Git(context).getRepos(…)方法中需要refresh参数来判断是否使用缓存。
itemBuilder为列表项的builder，我们需要在该回调中构建每一个列表项Widget。由于列表项构建逻辑较复杂，我们单独封装一个RepoItem Widget 专门用于构建列表项UI。RepoItem 实现如下：

  1. import '../index.dart';
  2. class RepoItem extends StatefulWidget {
  3.   // 将`repo.id`作为RepoItem的默认key
  4.   RepoItem(this.repo) : super(key: ValueKey(repo.id));
  5.   final Repo repo;
  6.   @override
  7.   _RepoItemState createState() => _RepoItemState();
  8. }
  9. class _RepoItemState extends State<RepoItem> {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     var subtitle;
  13.     return Padding(
  14.       padding: const EdgeInsets.only(top: 8.0),
  15.       child: Material(
  16.         color: Colors.white,
  17.         shape: BorderDirectional(
  18.           bottom: BorderSide(
  19.             color: Theme.of(context).dividerColor,
  20.             width: .5,
  21.           ),
  22.         ),
  23.         child: Padding(
  24.           padding: const EdgeInsets.only(top: 0.0, bottom: 16),
  25.           child: Column(
  26.             crossAxisAlignment: CrossAxisAlignment.start,
  27.             children: <Widget>[
  28.               ListTile(
  29.                 dense: true,
  30.                 leading: gmAvatar(
  31.                   //项目owner头像
  32.                   widget.repo.owner.avatar_url,
  33.                   width: 24.0,
  34.                   borderRadius: BorderRadius.circular(12),
  35.                 ),
  36.                 title: Text(
  37.                   widget.repo.owner.login,
  38.                   textScaleFactor: .9,
  39.                 ),
  40.                 subtitle: subtitle,
  41.                 trailing: Text(widget.repo.language ?? ""),
  42.               ),
  43.               // 构建项目标题和简介
  44.               Padding(
  45.                 padding: const EdgeInsets.symmetric(horizontal: 16.0),
  46.                 child: Column(
  47.                   crossAxisAlignment: CrossAxisAlignment.start,
  48.                   children: <Widget>[
  49.                     Text(
  50.                       widget.repo.fork
  51.                           ? widget.repo.full_name
  52.                           : widget.repo.name,
  53.                       style: TextStyle(
  54.                         fontSize: 15,
  55.                         fontWeight: FontWeight.bold,
  56.                         fontStyle: widget.repo.fork
  57.                             ? FontStyle.italic
  58.                             : FontStyle.normal,
  59.                       ),
  60.                     ),
  61.                     Padding(
  62.                       padding: const EdgeInsets.only(top: 8, bottom: 12),
  63.                       child: widget.repo.description == null
  64.                           ? Text(
  65.                               GmLocalizations.of(context).noDescription,
  66.                               style: TextStyle(
  67.                                   fontStyle: FontStyle.italic,
  68.                                   color: Colors.grey[700]),
  69.                             )
  70.                           : Text(
  71.                               widget.repo.description,
  72.                               maxLines: 3,
  73.                               style: TextStyle(
  74.                                 height: 1.15,
  75.                                 color: Colors.blueGrey[700],
  76.                                 fontSize: 13,
  77.                               ),
  78.                             ),
  79.                     ),
  80.                   ],
  81.                 ),
  82.               ),
  83.               // 构建卡片底部信息
  84.               _buildBottom()
  85.             ],
  86.           ),
  87.         ),
  88.       ),
  89.     );
  90.   }
  91.   // 构建卡片底部信息
  92.   Widget _buildBottom() {
  93.     const paddingWidth = 10;
  94.     return IconTheme(
  95.       data: IconThemeData(
  96.         color: Colors.grey,
  97.         size: 15,
  98.       ),
  99.       child: DefaultTextStyle(
  100.         style: TextStyle(color: Colors.grey, fontSize: 12),
  101.         child: Padding(
  102.           padding: const EdgeInsets.symmetric(horizontal: 16),
  103.           child: Builder(builder: (context) {
  104.             var children = <Widget>[
  105.               Icon(Icons.star),
  106.               Text(" " +
  107.                   widget.repo.stargazers_count
  108.                       .toString()
  109.                       .padRight(paddingWidth)),
  110.               Icon(Icons.info_outline),
  111.               Text(" " +
  112.                   widget.repo.open_issues_count
  113.                       .toString()
  114.                       .padRight(paddingWidth)),
  115.               Icon(MyIcons.fork), //我们的自定义图标
  116.               Text(widget.repo.forks_count.toString().padRight(paddingWidth)),
  117.             ];
  118.             if (widget.repo.fork) {
  119.               children.add(Text("Forked".padRight(paddingWidth)));
  120.             }
  121.             if (widget.repo.private == true) {
  122.               children.addAll(<Widget>[
  123.                 Icon(Icons.lock),
  124.                 Text(" private".padRight(paddingWidth))
  125.               ]);
  126.             }
  127.             return Row(children: children);
  128.           }),
  129.         ),
  130.       ),
  131.     );
  132.   }
  133. }

上面代码有两点需要注意：

  1. 在构建项目拥有者头像时调用了gmAvatar(…)方法，该方法是是一个全局工具函数，专门用于获取头像图片，实现如下：

    1. Widget gmAvatar(String url, {
    2. double width = 30,
    3. double height,
    4. BoxFit fit,
    5. BorderRadius borderRadius,
    6. }) {
    7. var placeholder = Image.asset(
    8.    "imgs/avatar-default.png", //头像占位图，加载过程中显示
    9.    width: width,
    10.    height: height
    11. );
    12. return ClipRRect(
    13.  borderRadius: borderRadius ?? BorderRadius.circular(2),
    14.  child: CachedNetworkImage( 
    15.    imageUrl: url,
    16.    width: width,
    17.    height: height,
    18.    fit: fit,
    19.    placeholder: (context, url) =>placeholder,
    20.    errorWidget: (context, url, error) =>placeholder,
    21.  ),
    22. );
    23. }

  2. 代码中调用了CachedNetworkImage 是cached_network_image包中提供的一个Widget，它不仅可以在图片加载过程中指定一个占位图，而且还可以对网络请求的图片进行缓存，更多详情读者可以自行查阅其文档。

  3. 由于Flutter 的Material 图标库中没有fork图标，所以我们在iconfont.cn上找了一个fork图标，然后根据“图片和Icon”一节中介绍的使用自定义字体图标的方法集成到了我们的项目中。

    15.6.3 抽屉菜单

    抽屉菜单分为两部分：顶部头像和底部功能菜单项。当用户未登录，则抽屉菜单顶部会显示一个默认的灰色占位图，若用户已登录，则会显示用户的头像。抽屉菜单底部有“换肤”和“语言”两个固定菜单，若用户已登录，则会多一个“注销”菜单。用户点击“换肤”和“语言”两个菜单项，会进入相应的设置页面。我们的抽屉菜单效果如图15-3、15-4所示：
    15.创建一个完成的Flutter应用 - 图315.创建一个完成的Flutter应用 - 图4
    实现代码如下：

    1. class MyDrawer extends StatelessWidget {
    2. const MyDrawer({
    3.  Key key,
    4. }) : super(key: key);
    5. @override
    6. Widget build(BuildContext context) {
    7.  return Drawer(
    8.    //移除顶部padding
    9.    child: MediaQuery.removePadding(
    10.      context: context,
    11.      removeTop: true,
    12.      child: Column(
    13.        crossAxisAlignment: CrossAxisAlignment.start,
    14.        children: <Widget>[
    15.          _buildHeader(), //构建抽屉菜单头部
    16.          Expanded(child: _buildMenus()), //构建功能菜单
    17.        ],
    18.      ),
    19.    ),
    20.  );
    21. }
    22. Widget _buildHeader() {
    23.  return Consumer<UserModel>(
    24.    builder: (BuildContext context, UserModel value, Widget child) {
    25.      return GestureDetector(
    26.        child: Container(
    27.          color: Theme.of(context).primaryColor,
    28.          padding: EdgeInsets.only(top: 40, bottom: 20),
    29.          child: Row(
    30.            children: <Widget>[
    31.              Padding(
    32.                padding: const EdgeInsets.symmetric(horizontal: 16.0),
    33.                child: ClipOval(
    34.                  // 如果已登录，则显示用户头像；若未登录，则显示默认头像
    35.                  child: value.isLogin
    36.                      ? gmAvatar(value.user.avatar_url, width: 80)
    37.                      : Image.asset(
    38.                          "imgs/avatar-default.png",
    39.                          width: 80,
    40.                        ),
    41.                ),
    42.              ),
    43.              Text(
    44.                value.isLogin
    45.                    ? value.user.login
    46.                    : GmLocalizations.of(context).login,
    47.                style: TextStyle(
    48.                  fontWeight: FontWeight.bold,
    49.                  color: Colors.white,
    50.                ),
    51.              )
    52.            ],
    53.          ),
    54.        ),
    55.        onTap: () {
    56.          if (!value.isLogin) Navigator.of(context).pushNamed("login");
    57.        },
    58.      );
    59.    },
    60.  );
    61. }
    62. // 构建菜单项
    63. Widget _buildMenus() {
    64.  return Consumer<UserModel>(
    65.    builder: (BuildContext context, UserModel userModel, Widget child) {
    66.      var gm = GmLocalizations.of(context);
    67.      return ListView(
    68.        children: <Widget>[
    69.          ListTile(
    70.            leading: const Icon(Icons.color_lens),
    71.            title: Text(gm.theme),
    72.            onTap: () => Navigator.pushNamed(context, "themes"),
    73.          ),
    74.          ListTile(
    75.            leading: const Icon(Icons.language),
    76.            title: Text(gm.language),
    77.            onTap: () => Navigator.pushNamed(context, "language"),
    78.          ),
    79.          if(userModel.isLogin) ListTile(
    80.            leading: const Icon(Icons.power_settings_new),
    81.            title: Text(gm.logout),
    82.            onTap: () {
    83.              showDialog(
    84.                context: context,
    85.                builder: (ctx) {
    86.                  //退出账号前先弹二次确认窗
    87.                  return AlertDialog(
    88.                    content: Text(gm.logoutTip),
    89.                    actions: <Widget>[
    90.                      FlatButton(
    91.                        child: Text(gm.cancel),
    92.                        onPressed: () => Navigator.pop(context),
    93.                      ),
    94.                      FlatButton(
    95.                        child: Text(gm.yes),
    96.                        onPressed: () {
    97.                          //该赋值语句会触发MaterialApp rebuild
    98.                          userModel.user = null;
    99.                          Navigator.pop(context);
    100.                        },
    101.                      ),
    102.                    ],
    103.                  );
    104.                },
    105.              );
    106.            },
    107.          ),
    108.        ],
    109.      );
    110.    },
    111.  );
    112. }
    113. }

    用户点击“注销”，userModel.user 会被置空，此时所有依赖userModel的组件都会被rebuild，如主页会恢复成未登录的状态。
    本小节我们介绍了APP入口MaterialApp的一些配置，然后实现了APP的首页。后面我们将展示登录页、换肤页、语言切换页。

    登录页

    我们说过Github有多种登录方式，为了简单起见，我们只实现通过用户名和密码登录。在实现登录页时有四点需要注意：

  4. 可以自动填充上次登录的用户名（如果有）。

  5. 为了防止密码输入错误，密码框应该有开关可以看明文。
  6. 用户名或密码字段在调用登录接口前有本地合法性校验（比如不能为空）。
  7. 登录成功后需更新用户信息。

实现代码如下：

  1. import '../index.dart';
  2. class LoginRoute extends StatefulWidget {
  3.   @override
  4.   _LoginRouteState createState() => _LoginRouteState();
  5. }
  6. class _LoginRouteState extends State<LoginRoute> {
  7.   TextEditingController _unameController = new TextEditingController();
  8.   TextEditingController _pwdController = new TextEditingController();
  9.   bool pwdShow = false; //密码是否显示明文
  10.   GlobalKey _formKey = new GlobalKey<FormState>();
  11.   bool _nameAutoFocus = true;
  12.   @override
  13.   void initState() {
  14.     // 自动填充上次登录的用户名，填充后将焦点定位到密码输入框
  15.     _unameController.text = Global.profile.lastLogin;
  16.     if (_unameController.text != null) {
  17.       _nameAutoFocus = false;
  18.     }
  19.     super.initState();
  20.   }
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     var gm = GmLocalizations.of(context);
  24.     return Scaffold(
  25.       appBar: AppBar(title: Text(gm.login)),
  26.       body: Padding(
  27.         padding: const EdgeInsets.all(16.0),
  28.         child: Form(
  29.           key: _formKey,
  30.           autovalidate: true,
  31.           child: Column(
  32.             children: <Widget>[
  33.               TextFormField(
  34.                   autofocus: _nameAutoFocus,
  35.                   controller: _unameController,
  36.                   decoration: InputDecoration(
  37.                     labelText: gm.userName,
  38.                     hintText: gm.userNameOrEmail,
  39.                     prefixIcon: Icon(Icons.person),
  40.                   ),
  41.                   // 校验用户名（不能为空）
  42.                   validator: (v) {
  43.                     return v.trim().isNotEmpty ? null : gm.userNameRequired;
  44.                   }),
  45.               TextFormField(
  46.                 controller: _pwdController,
  47.                 autofocus: !_nameAutoFocus,
  48.                 decoration: InputDecoration(
  49.                     labelText: gm.password,
  50.                     hintText: gm.password,
  51.                     prefixIcon: Icon(Icons.lock),
  52.                     suffixIcon: IconButton(
  53.                       icon: Icon(
  54.                           pwdShow ? Icons.visibility_off : Icons.visibility),
  55.                       onPressed: () {
  56.                         setState(() {
  57.                           pwdShow = !pwdShow;
  58.                         });
  59.                       },
  60.                     )),
  61.                 obscureText: !pwdShow,
  62.                 //校验密码（不能为空）
  63.                 validator: (v) {
  64.                   return v.trim().isNotEmpty ? null : gm.passwordRequired;
  65.                 },
  66.               ),
  67.               Padding(
  68.                 padding: const EdgeInsets.only(top: 25),
  69.                 child: ConstrainedBox(
  70.                   constraints: BoxConstraints.expand(height: 55.0),
  71.                   child: RaisedButton(
  72.                     color: Theme.of(context).primaryColor,
  73.                     onPressed: _onLogin,
  74.                     textColor: Colors.white,
  75.                     child: Text(gm.login),
  76.                   ),
  77.                 ),
  78.               ),
  79.             ],
  80.           ),
  81.         ),
  82.       ),
  83.     );
  84.   }
  85.   void _onLogin() async {
  86.     // 提交前，先验证各个表单字段是否合法
  87.     if ((_formKey.currentState as FormState).validate()) {
  88.       showLoading(context);
  89.       User user;
  90.       try {
  91.         user = await Git(context).login(_unameController.text, _pwdController.text);
  92.         // 因为登录页返回后，首页会build，所以我们传false，更新user后不触发更新
  93.         Provider.of<UserModel>(context, listen: false).user = user;
  94.       } catch (e) {
  95.         //登录失败则提示
  96.         if (e.response?.statusCode == 401) {
  97.           showToast(GmLocalizations.of(context).userNameOrPasswordWrong);
  98.         } else {
  99.           showToast(e.toString());
  100.         }
  101.       } finally {
  102.         // 隐藏loading框
  103.         Navigator.of(context).pop();
  104.       }
  105.       if (user != null) {
  106.         // 返回
  107.         Navigator.of(context).pop();
  108.       }
  109.     }
  110.   }
  111. }

代码很简单，关键地方都有注释，不再赘述，下面我们看一下运行效果，如图15-5所示。
15.创建一个完成的Flutter应用 - 图5

多语言和多主题

本实例APP中语言和主题都是可以设置的，而两者都是通过ChangeNotifierProvider来实现的：我们在main函数中使用了Consumer2，依赖了ThemeModel和LocaleModel，因此，当我们在语言和主题设置页更该当前的配置后，Consumer2的builder都会重新执行，构建一个新的MaterialApp，所以修改会立即生效。下面看一下语言和主题设置页的实现。

15.8.1 语言选择页

APP语言选择页提供三个选项：中文简体、美国英语、跟随系统。我们将当前APP使用的语言高亮显示，并且在后面添加一个“对号”图标，实现如下：

  1. class LanguageRoute extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     var color = Theme.of(context).primaryColor;
  5.     var localeModel = Provider.of<LocaleModel>(context);
  6.     var gm = GmLocalizations.of(context);
  7.     //构建语言选择项
  8.     Widget _buildLanguageItem(String lan, value) {
  9.       return ListTile(
  10.         title: Text(
  11.           lan,
  12.           // 对APP当前语言进行高亮显示
  13.           style: TextStyle(color: localeModel.locale == value ? color : null),
  14.         ),
  15.         trailing:
  16.             localeModel.locale == value ? Icon(Icons.done, color: color) : null,
  17.         onTap: () {
  18.           // 更新locale后MaterialApp会重新build
  19.           localeModel.locale = value;
  20.         },
  21.       );
  22.     }
  23.     return Scaffold(
  24.       appBar: AppBar(
  25.         title: Text(gm.language),
  26.       ),
  27.       body: ListView(
  28.         children: <Widget>[
  29.           _buildLanguageItem("中文简体", "zh_CN"),
  30.           _buildLanguageItem("English", "en_US"),
  31.           _buildLanguageItem(gm.auto, null),
  32.         ],
  33.       ),
  34.     );
  35.   }
  36. }

上面代码逻辑很简单，唯一需要注意的是我们在build(…)方法里面定义了_buildLanguageItem(…)方法，它和在LanguageRoute类中定义该方法的区别就在于：在build(…)内定义的方法可以共享build(...)方法上下文中的变量，本例中是共享了localeModel。当然，如果_buildLanguageItem(…)的实现复杂一些的话不建议这样做，此时最好是将其作为LanguageRoute类的方法。该页面运行效果如图15-6、15-7所示：
15.创建一个完成的Flutter应用 - 图615.创建一个完成的Flutter应用 - 图7
切换语言后立即生效。

15.8.2 主题选择页

一个完整的主题Theme包括很多选项，这些选项在ThemeData中定义。本实例为了简单起见，我们只配置主题颜色。我们提供几种默认预定义的主题色供用户选择，用户点击一种色块后则更新主题。主题选择页的实现代码如下：

  1. class ThemeChangeRoute extends StatelessWidget{
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Scaffold(
  5.       appBar: AppBar(
  6.         title: Text(GmLocalizations.of(context).theme),
  7.       ),
  8.       body: ListView( //显示主题色块
  9.         children: Global.themes.map<Widget>((e) {
  10.           return GestureDetector(
  11.             child: Padding(
  12.               padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 16),
  13.               child: Container(
  14.                 color: e,
  15.                 height: 40,
  16.               ),
  17.             ),
  18.             onTap: () {
  19.               //主题更新后，MaterialApp会重新build
  20.               Provider.of<ThemeModel>(context).theme = e;
  21.             },
  22.           );
  23.         }).toList(),
  24.       ),
  25.     );
  26.   }
  27. }

运行效果如图15-8所示：
15.创建一个完成的Flutter应用 - 图8
点击其它主题色块后，APP主题色立马切换生效。

参考链接

https://book.flutterchina.club/chapter15/intro.html