前言

【Flutter 从 0 到 1】这个专栏记录了我是如何从零基础开始学习 Flutter，以及在学习过程中踩过的坑，到最后输出一份属于自己的项目模板的过程。写这个专栏的目的也是为了让初学 Flutter 的朋友避免走一些弯路，能尽快的学会 Flutter 以及它的生态。

这里存放该专栏的文章顺序，每次发布新文章时，会更新每篇文章的这里：

第一篇：为什么选择 Flutter ？
第二篇：如何上手 Flutter ？
第三篇：了解 Flutter 的生态
第四篇：Flutter 简单的工程化 <— 你的当前位置
第N篇：...

Start Game

合理的目录规划

你应该先将 Flutter SDK 升级到最新版本，截止本文发表，最新的为 2.8.0 版本。然后运行命令或者在 IDE 中创建一个新的 Flutter 工程。

然后手动将刚创建出来的项目的目录结构，补充成下图所示的样子：

# flutter_template_mini
├─ assets             # 静态资源
│  ├─ icons           # 字体图标
│  ├─ images          # 图片
│  ├─ jsons           # json 文件
├─ lib
│  ├─ common          # 全局公共类、方法、变量等
│  ├─ db              # 本地缓存
│  ├─ http            # http
│  │  ├─ api
│  │  └─ request
│  ├─ models          # model 层
│  ├─ navigator       # Navigator 1.0
│  ├─ pages           # 所有页面
│  ├─ provider        # 状态管理
│  ├─ utils           # 工具类
├─ └─ main.dart       # 入口
└─ pubspec.yaml       # 包管理

其中 assets、common、db、http、models、navigator、pages、provider、utils，都是需要手动创建的。

解释目录

assets：
- icons：存放下载好的字体图标文件，具体教程参考book.flutterchina.club/chapter3/im…
- images：存放下载好的图片
- jsons：存放已知的 json 文件，主要为了方便将 json 转化为 dart model
common：存放全局公共类、方法、变量等，比如全局的颜色 color
db：本地缓存，封装好的 shared_preferences 插件可以放在这里
http：存放和网络请求相关的类
- api：存放后端 api 的地方
- request：封装好的 Dio 插件放在这里
models：model 层，存放 dart model
navigator: 存放路由相关的类
pages：存放所有的页面
provider：状态管理，使用的是插件 provider，当然你也可以选择其他的插件如 GetX
utils：工具类，比如判断当前设备的方法就可以存放在这里
main.dart：入口，项目的预初始化逻辑可以放在这里

多说一嘴

目录这个东西，并不是一成不变的，你可以根据自己的喜欢，合理的修改上面的目录结构。

关于路由

这篇文章介绍简单的工程化，所以路由部分采用的是 Flutter 官方提供的 Navigator 1.0，你还可以根据自己的喜好选择 Navigator 2.0 或者三方插件 fluro

Navigator 1.0 的封装方式，直接看我以前写的这篇文章 Flutter 路由拦截

关于 http

发送 HTTP 请求直接使用 Dio 即可，但工程的话，还是要对其进行简单的封装，至少要实现错误的统一拦截，具体封装方法直接看我的这篇文章 Flutter 封装网络请求库 Dio

关于 JSON 转 Dart Model 类

纯手写实体类（不推荐）
用网页自动生成工具: 根据 JSON 自动生成实体类，并 copy 到项目中（所有项目都通用）
使用插件 json_serializable（更适合大型项目）

新手可以采用第二种方案，上手更加简单

这里随便提供一个自动生成的网址：json_to_dart

JSON <——> Map <——> Dart Model 三者之间的转化是常用的技巧

代码

当然，很多时候文字总是不如代码来的实在，所以，想要代码的朋友可以看下这里：flutter-template-mini

【Flutter 从 0 到 1】Flutter 简单的工程化

前言