课程介绍

想开发你自己的抖音 APP 吗?本课程将带领大家使用革命性的 Google 跨平台 UI 框架 Flutter 来开发一款类似于抖音的短视频社交应用“围观”。课程内容主打实战,因此具备很强的工程实践参考性。课程视频累计时长接近 20 个小时,参考代码约 1 万行。只要用心学习完本课程,并理解清楚参考代码,则完全可以胜任初级或中级移动开发工程师岗位。

本课程里所开发的围观 APP 使用了模拟的后端 API 服务,可以替换为本网校另外一门课程 Python Sanic 高并发服务开发实战 里所开发的围观 API 服务,有志于成为全栈工程师的同学可以选学。

课程地址

因不同平台收取的服务费不同,因此价格略有差异。大家可自由选择购买平台,内容都会同步更新。如有任何有关课程购买的疑问,可加入 QQ 群 729051923 咨询。

适用人群

学习过 Web、安卓、iOS 等任意一种客户端开发技术,有 Dart 语言基础(本网校已开设相关课程)。

课程资料

  1. 参考代码

由于 GitHub 仓库代码更新(优化或修复 Bug)比课程内容频繁,因此课程里所讲代码跟仓库代码可能会有细微差别。

课程答疑

  1. 叽歪论坛 请在课程对应分类下提问
  2. QQ 讨论群 434396612

以上服务均为附赠,不保证答疑及时性。

项目演示

课程目录

Flutter 框架

介绍

  • 特点
  • 安装
  • Hello Flutter

组件

  • 什么是组件
  • 组件如何渲染
  • 基本组件
  • Material 组件
  • 生命周期事件
  • Key
  • Global Key

布局

  • Flutter 布局机制
  • 布局单个组件
  • 水平和垂直布局
  • 常用布局组件
  • 布局实例

交互

  • 有状态和无状态组件
  • 创建有状态组件
  • 常用交互组件

资源

  • 添加资源
  • 资源变体
  • 加载资源
  • 加载图片资源
  • 依赖包中的图片资源

导航

  • 导航器(Navigator)
  • 进入和返回页面
  • 使用命名路由
  • 跨页面传递数据
  • 跨页面指引

状态

  • 什么是状态
  • 状态类别
  • 状态管理方式
  • 状态存放位置
  • 使用 provider 来管理状态

围观 APP 帐号功能开发

搭建骨架

  • 功能介绍
  • 干净架构
  • 控制反转(IoC)
  • 搭建骨架

实现 Tab 导航

  • 创建 TabPage
  • 创建 WgTabBar
  • 给各 Tab 页添加 TabBar

定义业务实体

  • JSON 序列化和反序列化
  • 实现拷贝创建(copyWith)、按值比较(==)、字符串化(toString)等方法
  • 定义 NoticeEntity

管理应用状态

  • Redux 介绍
  • 使用 Redux 的好处
  • Flutter 应用里如何使用 Redux
  • 集成 Redux

请求服务端数据

  • 封装对服务端 API 的调用
  • 使用 dio 来执行 http 请求
  • 使用 cookie_jar 来支持 Cookie
  • 模拟(Mock)服务端 API

注册/登录/退出

  • 定义实体
  • 登录
  • 注册
  • 检查登录
  • 退出

显示/修改个人资料

  • 显示个人资料
  • 修改个人资料

围观 APP 动态功能开发

显示图片

  • 使用 cached_network_image 来从网络加载并缓存图片
  • 使用 carousel_slider 来轮播图片
  • 创建 ImagePlayerPage

播放视频

  • 使用 video_player 来播放视频
  • 创建 VideoPlayerWithControlBar
  • 创建 VideoPlayerWithCover
  • 创建 VideoPlayerPage

发布动态

  • 定义实体
  • 上传文件
  • 保存输入
  • 使用 image_picker 来选取照片或视频
  • 创建并处理 postPublishAction
  • 创建 PublishPage

展示动态

  • 创建 PostTile
  • 创建并处理 PostFollowingsAction
  • 创建并处理 postFollowingAction
  • 在 HomePage 展示关注的动态

操作动态

  • 喜欢动态
  • 删除动态

围观 APP 用户功能开发

用户页之头部

  • 创建并处理 userInfoAction
  • 实现 SliverAppBar

用户页之主体

  • 创建并处理 postPublishedAction
  • 实现 TabBarView

用户关注

  • 关注用户
  • 创建 UserTile
  • 创建并处理 userFollowingsAction
  • 创建并处理 userFollowersAction
  • 在 UserDetailPage 显示关注的用户
  • 创建 FollowingUsersPage
  • 创建 FollowerUsersPage

Android 打包

  • 配置 Manifest
  • 配置 Gradle
  • 配置图标
  • 签名
  • 构建
  • 发布

iOS 打包

  • 注册 Apple 开发者帐号
  • 注册应用
  • 配置 Xcode
  • 配置图标
  • 命令行构建
  • 使用 Xcode 来构建并发布到 App Store

参考资料

  1. 参考代码
  2. Flutter
  3. Dart Packages
  4. Dart
  5. 天火技术博客
  6. 天火 GitHub

更新日志

  • 2019-11-03 课程视频全新录制,讲解更细致和准确,升级 Flutter 到 v1.9
  • 2019-07-13 升级 Flutter 到 v1.7
  • 2019-05-25 升级 Flutter 到 v1.5