专栏首页Flutter笔记Flutter实战 | 从 0 搭建「网易云音乐」APP(一、创建项目、添加插件、通用代码)

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

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

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

因为工作的原因,一星期有可能只更新一篇该系列的文章,不过一星期最少一篇。

本章节为第一节,从创建项目说起。

创建「网易云音乐」项目

首先看一下本地 Flutter 环境:

创建命令就都知道了,不用命令的话,用 AS 或者 VS 更简单。

项目创建好后,删除无用代码,然后开始创建文件夹:

一共分为六个文件夹:

•model:存放所有数据类•pages:存放所有的页面•provider:存放所有的 Provider•route:存放路由相关•utils:存放所有的工具类•widgets:存放所有封装好的组件

下面我们开始添加依赖。

添加插件

首先对我们一些大概的功能有一个了解,

例如 网络请求肯定有,那我会选择 Dio 来当做网络请求的插件,

下面是目前所想到的插件:

插件

作用

Provider[1]

状态管理,UI、数据 分离

shared_preferences[2]

本地存储数据,持久化

dio[3]

网络请求

flutter_screenutil[4]

屏幕适配

fluro[5]

路由管理

common_utils[6]

Dart 常用工具类

dio_cookie_manager[7]

dio cookie 工具

cookie_jar[8]

Cookie 管理

permission_handler[9]

权限处理

path_provider[10]

沙盒路径

extended_image[11]

屌炸天的 Image 扩展

通用代码

功能如下:

插件

作用

routes.dart

fluro 的路由管理

net_utils.dart

网络请求管理

common_text_style.dart

一些通用的 text 样式

h_empty_view.dart

横向空组件(用于占位)

v_empty_view.dart

纵向空组件(用于占位)

loading.dart

加载组件

widget_future_builder.dart

网络请求组件

widget_net_error.dart

网络请求失败组件

其中 widget_future_builder.dart 在我上一篇文章:Flutter | 定义一个通用的多功能网络请求 Widget 中已经说过了,这里就不多说了。

挑几个没说过的说一下。

loading.dart

用于显示加载中的组件。

开始的时候考虑用 showDialog 来做,但是它默认会把背景变成半透明的黑色。

然后查看源码,发现他是调用 showGeneralDialog 来创建的对话框,传入了一个 barrierColor: Colors.black54 来控制的半透明背景。

那我可以自己来使用 showGeneralDialog,关于该控件的介绍及使用,我这里就不多赘述了,可以查看caijinglong的博客 - Flutter dialog (2) - showGeneralDialog的使用。[12]

最后我这里的代码就是这样(截取一部分):

class Loading {
  static bool isLoading = false;

  static void showLoading(BuildContext context) {
    if (!isLoading) {
      isLoading = true;
      showGeneralDialog(
          context: context,
          pageBuilder: (BuildContext context, Animation animation,
              Animation secondaryAnimation) {
            return xxx;
          }).then((v) {
            // 消失的时候把状态置为 false
        isLoading = false;
      });
    }
  }

  static void hideLoading(BuildContext context) {
    if (isLoading) {
      Navigator.of(context).pop();
    }
  }
}

只提供了两个静态方法:showLoading()hideLoading()

showLoading 逻辑如下:

1.首先判断 isLoading 是否为 true,如果正在显示 loading,那么则不作操作2.如果不为 true,则显示 loading,并把状态置为 true3.调用 then 方法,在 dialog 消失的时候把状态置为 false

net_utils.dart

网络请求的管理&工具类。

在这个文件中,我们要进行 Dio 的初始化和网络请求的封装。

在查看 API 文档的时候,发现登录状态是由 Cookie 来管理的。 所以我要使用 cookie 的插件来满足需求。

写一个初始化的方法,在 runApp 时调用:

static Dio _dio;

static void init() async {
   // 获取沙盒路径,用于存储 cookie
  Directory tempDir = await getTemporaryDirectory();
  String tempPath = tempDir.path;
  CookieJar cj = PersistCookieJar(dir: tempPath);
  _dio = Dio(BaseOptions(baseUrl: 'http://127.0.0.1:3000'))
    ..interceptors.add(CookieManager(cj))
    ..interceptors.add(LogInterceptor(responseBody: true, requestBody: true));
}

然后再写一个通用的 _get() 方法,所有的网络请求最终都经过它:

static Future<Response> _get(BuildContext context, String url,
                             {Map<String, dynamic> params}) async {
  Loading.showLoading(context);
  try {
    return await _dio.get(url, queryParameters: params);
  } on DioError catch (e) {
    if (e.response is Map) {
      return Future.value(e.response);
    } else {
      return Future.error(0);
    }
  } finally {
    Loading.hideLoading(context);
  }
}

这个逻辑我在上一篇文章中也提到过,如果返回状态不是 2xx,那就会抛出 DioError,然后我们在这里处理逻辑即可。

common_text_style.dart

一些通用的 text 样式。

我们在这里创建一些 顶级变量

final commonTextStyle = TextStyle(fontSize: 16, color: Colors.black87);
final smallCommonTextStyle = TextStyle(fontSize: 12, color: Colors.black87);
final smallGrayTextStyle = TextStyle(fontSize: 12, color: Colors.grey);

这样其他类使用起来就很方便,万一以后要改文字样式也很方便。

总结

该篇文章是当前系列的第一篇,主要提供了一些搭建项目的思路。

该系列文章代码会传至 GitHub:https://github.com/wanglu1209/NeteaseClouldMusic

并且每次提交都会对应一个分支。

本文中的代码请在 NeteaseClouldMusic-Day1 分支中查看代码。

References

[1] Provider: https://pub.dev/packages/provider [2] shared_preferences: https://pub.dev/packages/shared_preferences [3] dio: https://pub.dev/packages/dio [4] flutter_screenutil: https://pub.dev/packages/flutter_screenutil [5] fluro: https://pub.dev/packages/fluro [6] common_utils: https://pub.dev/packages/common_utils [7] dio_cookie_manager: https://pub.dev/packages/dio_cookie_manager [8] cookie_jar: https://pub.dev/packages/cookie_jar [9] permission_handler: https://pub.dev/packages/permission_handler [10] path_provider: https://pub.dev/packages/path_provider [11] extended_image: https://pub.dev/packages/extended_image [12] caijinglong的博客 - Flutter dialog (2) - showGeneralDialog的使用。: https://www.kikt.top/posts/flutter/dialog/dialog-2/

本文分享自微信公众号 - Flutter笔记(Flutter_Note),作者:Flutter笔记

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

原始发表时间:2019-10-10

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter DropdownButton简单使用及魔改源码

    前面讲过 ExpansionPanel, ExpansionPanel大部分情况用来实现展开列表等稍微复杂的业务逻辑。

    Flutter笔记
  • Flutter 封装一个 Banner 轮播图

    1.可以自定义高度和一些属性2.展示图片3.自动翻页播放4.点击事件5.指示器6.人为拖动的时候关闭自动播放

    Flutter笔记
  • 「Flutter笔记」的2019年 | 掘金年度征文

    2019年对于我个人来说是一个不平凡的一年,开通了公众号「Flutter笔记」,截止目前维护了 60 篇文章。

    Flutter笔记
  • 3 Spark机器学习 spark MLlib 矩阵向量、矩阵运算Breeze库-1

    机器学习里矩阵是必不可少的,无论Python、Java能做机器学习的语言,都会提供比较优质的矩阵库。

    天涯泪小武
  • 爬虫实践: 获取百度贴吧内容

    本次要爬的贴吧是<< 西部世界 >>,西部世界是我一直很喜欢的一部美剧,平时有空也会去看看吧友们都在聊些什么。所以这次选取这个吧来作为实验材料。

    sergiojune
  • ​Python爬虫--- 1.5 爬虫实践: 获取百度贴吧内容

    原文链接:https://www.fkomm.cn/article/2018/7/22/21.html

    圆方圆PYTHON学院
  • 第四周深层神经网络4.1 深层神经网络4.2 前向和反向传播4.3 深层网络中的前向传播4.4 核对矩阵的维数4.5 为什么使用深层表示4.6 搭建深层网络块4.7 参数vs超参数4.8 这和大脑有什

    4.1 深层神经网络 ? 4.2 前向和反向传播 4.3 深层网络中的前向传播 ? 4.4 核对矩阵的维数 ? ? .png 4.5 为什么使用深层表示 ? ?...

    致Great
  • webpack热更新配置小结

    本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 webpack热更新配置 热更新,可以使开发的人在修改代码后,不用刷...

    IMWeb前端团队
  • 后端程序员也能看懂的微信小程序开发入门

    小程序时至今日已经非常火爆了,作为软件体系中的一员,越来越多的公司与个人都在发展自己的小程序,而且小程序不再是单一的微信小程序了,还有百度小程序、支付宝小程序、...

    蒋老湿
  • 聊聊sentinel的DefaultSlotsChainBuilder

    本文主要研究一下sentinel的DefaultSlotsChainBuilder

    codecraft

扫码关注云+社区

领取腾讯云代金券