iFlutter是一款辅助Flutter开发的 IDEA 插件
插件安装
插件已上传官方Plugins仓库,可在IDEA Plugins 界面搜索 iFlutter
下载
iFlutter生态
-
欢迎PR、issues、advice,一起共建Flutter生态 Github
-
最新文档地址 Wiki
功能说明
- 资源文件管理
- 依赖树生成
- Dart代码生成
- Http接口Mock
- 包检查更新
- 提取远程依赖
注册资源
Flutter开发过程中,不可避免地需要使用到本地资源。比如:使用 bg_login.png
文件作为背景图,开发一个登录界面,步骤如下:
- 在项目根目录创建
images
文件夹,并把bg_login.png
添加到images
; - 注册资源到
pubspec.yaml
:
flutter:
uses-material-design: true
assets:
- images/bg_login.png #注册资源
- 使用资源:
Image.asset('images/bg_login');
使用资源前都需要在 pubspec.yaml
文件中注册,并且通过 硬编码
引用,凸显出两个问题:
- 存在繁琐的机械劳动
- 出错率高
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
文件,默认都生成,开发者可自行配置:
-
往项目中添加资源时,文件名不要存在
-
,比如bg-login.png
,否则pubsepec.yaml
文件生成会受到影响,可使用bg_login.png
代替。 -
如果AndroidStudio安装了
iFlutter
插件,资源自动注册功能默认打开,如果想禁用此功能,可配置关闭,配置如下:
资源重置
当合并分支代码时,如果出现 _res.dart
文件冲突,可重新生成:
iFlutter
通过以下两个步骤,对资源进行重置:
- 将
指定目录
资源重新注册到pubsepec.yaml
中; - 重新生成
_res.dart
文件;
检查重复资源
在项目版本需求开发周期内,同一个设计资源可能被不同的开发小伙伴重复引入,导致包体积增涨,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
后,在弹出目录选择对话框中,选择需要存储的位置。