Flutter实战 | 从 0 搭建「网易云音乐」APP（二、Splash Page、登录页、发现页）

本系列可能会伴随大家很长时间，这里我会从0开始搭建一个「网易云音乐」的APP出来。

下面是该APP 功能的思维导图：

前期回顾：

•Flutter实战 | 从 0 搭建「网易云音乐」APP（一、创建项目、添加插件、通用代码）

本篇为第二篇，在这里我们会搭建闪屏页、登录页、发现页的UI及逻辑。

Splash Page

我们现在的APP都有一个初始页面，在这个页面当中做一些插件和逻辑的初始化工作，所以我们首先就来做一个这个页面。

先来看一下效果：

非常简单，就是一个网易云音乐的 Logo 从小到大。

大致代码如下：

return Scaffold(
  backgroundColor: Colors.white,
  body: Container(
    height: double.infinity,
    width: double.infinity,
    child: ScaleTransition(
      scale: _logoAnimation,
      child: Hero(
        tag: 'logo',
        child: Image.asset('images/icon_logo.png'),
      ),
    ),
  ),
);

但是，这个页面远不止只有一个动画这么简单。

首先在查看过API 之后了解到，因很多接口都需要登录之后才能使用，所以在当前页面要判断是否已经登录，

如果没有登录，那么则跳转到登录页，如果已经登录，那么则跳转到APP首页。

逻辑代码如下：

UserModel userModel = Provider.of<UserModel>(context);
userModel.initUser();
if (userModel.user != null) {
  NetUtils.refreshLogin(context);
  NavigatorUtil.goHomePage(context);
} else
  NavigatorUtil.goLoginPage(context);

使用 Provider 来全局存储用户信息， SharedPreferences 存储用户信息到本地。

其中 initUser() 方法就是用来从 SharedPreferences 中获取用户信息，如果没有获取到就为null。

为 null 的情况下就要去跳转登录，如果不为空那么则刷新登录状态，然后跳转到首页。

当然，最后不要忘了 AnimationController.dispose()。

登录页