iFlutter - 加速Flutter开发

iFlutter是一款辅助Flutter开发的 IDEA 插件

插件安装

插件已上传官方Plugins仓库，可在IDEA Plugins 界面搜索 iFlutter 下载

---

iFlutter生态

• 欢迎PR、issues、advice，一起共建Flutter生态 Github

• 该文档不再更新，请直接查看最新文档 Wiki

---

功能说明

• 资源文件管理
• 依赖树生成
• Dart代码生成
• Http接口Mock
• 包检查更新
• 提取远程依赖
• ...

---

注册资源

Flutter开发过程中，不可避免地需要使用到本地资源。比如：使用 bg_login.png 文件作为背景图，开发一个登录界面，步骤如下：

1. 在项目根目录创建 images 文件夹，并把 bg_login.png 添加到 images;
2. 注册资源到 pubspec.yaml：

···
flutter:
  uses-material-design: true
  assets:
    - images/bg_login.png    #注册资源    
···  

3. 使用资源：

Image.asset('images/bg_login');

使用资源前都需要在 pubspec.yaml 文件中注册，并且通过 硬编码 引用，凸显出两个问题：

1. 存在繁琐的机械劳动
2. 出错率高

iFlutter解决方案: 当在 指定的目录 中添加、删除、重命名文件时，iFlutter 插件都会感知，并自动修改 pubspec.yaml 文件，同时生成配套的 _res.dart文件(类似Android中的R文件)，通过 R.xx 的方式就能使用资源，效果如下:

• 其中 指定的目录 ，并不是 iFlutter 所固定要求的，开发者可自行配置，默认 images、 assets，具体配置如下：

• 生成的 _res.dart 文件的规则又是什么呢？ 如果 指定的目录 是 images，那么就会生成 lib/res/images_res.dart 文件，对应的类名 ImagesRes。按此类推，如果目录名是 Assets，生成的文件和类名分别是 lib/res/assets_res.dart 和 AssetsRes。值得一提的是，如果开发者手动修改 pubspec.yaml 文件中资源的配置，iFlutter 也会感知，并重新生成 _res.dart 文件。

• 从 节省包体积、照顾强迫症研发 出发，可配置某些资源不会在 _res.dart 文件中生成字段，比如 .ttf、.json 文件，默认都生成，开发者可自行配置：

• 如果AndroidStudio安装了 iFlutter 插件，资源自动注册功能默认打开，如果想禁用此功能，可配置关闭，配置如下:

注册字体

往 指定的目录 添加文件，如果该文件后缀为：ttf, font, fon, otf, eot, woff, ttc，则 iFlutter 会视该文件为字体文件，便自动注册自定义字体到 pubspec.yaml 中，同时创建或修改 lib/res/i_font_res.dart 以生成引用字段。

如果项目已经有自定义字体配置，首次使用 iFlutter 需要确保，family:xxx 和字体文件名(不包括后缀)一致，例如：

flutter:
  ...
  fonts:
    - family: a
      fonts:
        - asset: relative/path/b.ttf

则需要修改 relative/path/b.ttf 文件名为 a.ttf

资源重置

当合并分支代码时，如果出现 _res.dart、i_font_res 文件冲突，可重新生成：

iFlutter 通过以下两个步骤，对资源进行重置:

• 将 指定目录 资源重新注册到 pubsepec.yaml 中；
• 重新生成 _res.dart、i_font_res 文件；

检查重复资源

在项目版本需求开发周期内，同一个设计资源可能被不同的开发小伙伴重复引入，导致包体积增涨，iFlutter 支持重复资源检测，效果如下：

归纳资源

随着Flutter项目的不断迭代，项目中所使用的资源也会越来越多。大部分的情况下，项目所使用的资源文件都是直接平展在目录下，类似:

images
  - login_wx.png
  - login_qq.png
  - login_phone.png
  - mine_setting.png
  - mine_defailt_portrait.png
  - launcher.png
  ...

为了方便项目模块化，iFlutter 支持对目录下的文件进行归类，以 _ 为规则进行分类，分类结果如下:

images
  - login
    - login_wx.png
    - login_qq.png
    - login_phone.png
  - mine
    - mine_setting.png
    - mine_defailt_portrait.png
  - launcher.png
  ...

资源归类后，iFlutter 会重新注册资源到 pubspec.yaml 中，并修改受影响的 *.dart 文件。

• 并非所有目录都支持资源归类，默认 assets 、images 目录，开发者可自行调整，具体如下:

具体效果如下：

---

依赖树生成

用于分析Flutter项目 包依赖 关系，对于生成的结果支持 Command/Control + F 搜索，功能入口：

---

Json 转 Dart Entity

在Flutter项目的 lib 目录及其 子目录 下，iFlutter 支持 Json 转 Dart Entity 功能，在其他目录下该功能不可用，使用效果如下：

• 默认生成的 Dart Entity 是支持 空安全 的，如果项目还没适配到 Flutter2.x 版本，通过修改 iFlutter 配置即可，配置如下：

• 填写类名时，采用驼峰命名法。

Dart Entity 补全 fromJson、toJson 方法

对于新的实体类，可以通过上一节 Json 转 Dart Entity 工具自动生成。针对项目中已有的类，那我们又该如何生成 toJson 和 fromJson 方法呢？先看使用效果：

• 官方插件 Dart 已经提供了生成 Constructor、Named Constructor 和 toString方法，而 iFlutter 的 fromJson 和 toJson 正好加强了官方对类的 fix(补全) 吧。

Live Template

使用效果：

使用说明：

快捷键	代码片段
importM	import 'package:flutter/material.dart;
importC	import 'package:flutter/cupertino.dart;
f_Column	Column(...)
f_Container	Container(...)
f_GestureDetector	GestureDetector(...)
f_Row	Row(...)
f_Stack	Stack(...)
f_Text	Text(...)

代码细节：

---

Http接口Mock

功能使用：

• iFlutter 开启的 HTTP Mock与项目绑定，MOCK 数据以项目为维度进行隔离。

---

包检查更新

iFlutter 插件会定时(5min)检查项目中直接依赖的Packages是否可更新，如果远程有最新版本，则 pubspec.yaml 对应节点会高亮显示，点击右侧 icon 会打开对应的页面，效果如下：

---

提取远程依赖

iFlutter 支持将远程依赖一键修改成本地依赖，方便对 Package 进一步扩展或者修复。将光标停留在对应的 Package 上，右键选择 convert to local dependency后，在弹出目录选择对话框中，选择需要存储的位置。