教练,我想学flutter

213 阅读2分钟

前言

本文重点为如何开发flutter项目,而非学习flutter,全文均以结果为主导。

为了能让你早日放弃flutter,这里是不会告诉你如何配置flutter环境以及demo的编写,而是直接教你如何搭建一个完整的项目,从而可以开始(照葫芦画瓢式)开发。

项目概况

项目链接在这里哟~,代码中有大量注释,请仔细查看。

看看本此demo生成出来的app是什么样子的

app截图.png

入门流程

入门开发将为3个阶段,而项目同样对不同阶段打了相应的tag,请分步食用:

  1. 入门基本
    • 项目基本结构定型
    • 最基本路由划分及使用
    • 基本页面编写
    • 布局如何构思与搭建(以web角度)
    • 简单页面及公用widget的编写与使用
    • 页面(不带参)跳转与回传参数
    • 主题的定义与使用
    • 静态资源(assets)的使用
  2. network相关
    • http请求库dio的封装
    • service层的编写
    • model层的编写,json序列化与json_serializable插件的使用
    • 页面widget中调用service层方法获取数据,并更新页面的例子
  3. 项目实战开发
    • 复杂widget编写
    • 在编写widget时,常用的dart语法
    • model层的进一步编写
  4. 数据的管理(待更新)
    • 本地数据存储 SharedPreferences
    • 状态管理器 Mobx
  5. 路由的管理(待更新)
    • 路由守卫
    • 带参数跳转

代码均以上传到github上,不同阶段对应着不同tag,如:step1、step2、step3

目录结构

assets/         # 静态资源

lib/
|- constants/   # 全局常量
|- models/      # 模型层
|- repository/  # 仓库,包含远程调用与本地调用
|- services/    # 业务服务封装
|- ui/          # 具体页面
|- utils/       # 工具类
|- widgets/     # 公用组件
|- main.dart    # 项目主入口
|- routes.dart  # 命名路由定义

github传送门:github.com/tellyourmad…