首页 > 其他分享 >iFlutter - 加速Flutter开发

iFlutter - 加速Flutter开发

时间:2023-04-25 12:13:47浏览次数:45  
标签:文件 iFlutter 加速 dart res login Flutter png

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    #注册资源    
···  
  1. 使用资源:
Image.asset('images/bg_login');

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

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

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

dynamic_res.gif

  • 其中 指定的目录 ,并不是 iFlutter 所固定要求的,开发者可自行配置,默认 imagesassets,具体配置如下:

资源联动配置

  • 生成的 _res.dart 文件的规则又是什么呢? 如果 指定的目录images,那么就会生成 lib/res/images_res.dart 文件,对应的类名 ImagesRes。按此类推,如果目录名是 Assets,生成的文件和类名分别是 lib/res/assets_res.dartAssetsRes。值得一提的是,如果开发者手动修改 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.darti_font_res 文件冲突,可重新生成:

资源重新生成

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

  • 指定目录 资源重新注册到 pubsepec.yaml 中;
  • 重新生成 _res.darti_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 文件。

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

Res Category 配置

具体效果如下:

cate_res.gif


依赖树生成

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

dep_tree.gif


Json 转 Dart Entity

在Flutter项目的 lib 目录及其 子目录 下,iFlutter 支持 JsonDart Entity 功能,在其他目录下该功能不可用,使用效果如下:

gen_entity.gif

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

J2D配置

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

Dart Entity 补全 fromJsontoJson 方法

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

Gen动效

  • 官方插件 Dart 已经提供了生成 ConstructorNamed ConstructortoString方法,而 iFlutterfromJsontoJson 正好加强了官方对类的 fix(补全) 吧。

Live Template

使用效果:

live_code.gif

使用说明:

快捷键 代码片段
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(...)

代码细节:

Live Template 配置


Http接口Mock

功能使用:

http-mock.gif

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

包检查更新

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

检查更新


提取远程依赖

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

convert_local_dep.gif

标签:文件,iFlutter,加速,dart,res,login,Flutter,png
From: https://www.cnblogs.com/android-er/p/17352211.html

相关文章

  • 一统天下 flutter - widget Sliver: SliverGrid - 网格(需要在 CustomScrollView 中使
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverGrid-网格(需要在CustomScrollView中使用)示例如下:lib\widget\sliver\sliver_grid.dart/**SliverGrid-网格(需要在CustomScrollView中使用)*/import'dart:......
  • 一统天下 flutter - widget Sliver: SliverAppBar/FlexibleSpaceBar - 可展开/收缩的
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverAppBar/FlexibleSpaceBar-可展开/收缩的标题栏(需要在CustomScrollView中使用)示例如下:lib\widget\sliver\sliver_app_bar.dart/**SliverAppBar/FlexibleSpaceBar......
  • 一统天下 flutter - widget Sliver: SliverToBoxAdapter - 为不可滚动组件提供 sliver
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverToBoxAdapter-为不可滚动组件提供sliver效果示例如下:lib\widget\sliver\sliver_to_box_adapter.dart/**SliverToBoxAdapter-为不可滚动组件提供sliver效果......
  • 一统天下 flutter - widget Sliver: NestedScrollView - 为可滚动组件提供 sliver 效
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:NestedScrollView-为可滚动组件提供sliver效果示例如下:lib\widget\sliver\nested_scroll_view.dart/**NestedScrollView-为可滚动组件提供sliver效果*/import......
  • 一统天下 flutter - widget Sliver: SliverPersistentHeader - 自定义可展开/收缩的标
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverPersistentHeader-自定义可展开/收缩的标题栏示例如下:lib\widget\sliver\sliver_persistent_header.dart/**SliverPersistentHeader-自定义可展开/收缩的标题栏......
  • flutter入门实战——文件读取和写入
    问题背景本文将介绍flutter中如何读取文件内容以及保存内容到文件。问题分析先直接上效果:问题解决话不多说,直接上代码。main.dart文件,代码如下:import'dart:async';import'dart:io';import'package:flutter/material.dart';import'package:path_provider/path_provid......
  • 【教程】在运行WeiPeiYang - Flutter项目时可能遇到的问题 (持续更新)
    在运行WeiPeiYang-Flutter项目时可能遇到的问题前言:本文目前的环境要求Flutter:2.8.0Dart:2.15.0保证从如下的地址克隆Q:打开项目之后发现没有Flutter的lib等文件夹确保在AndroidStudio内安装了Flutter插件,具体在File-Settings-Plugins内注意安装Flutter......
  • 深度学习--全连接层、高阶应用、GPU加速
    深度学习--全连接层、高阶应用、GPU加速MSE均方差CrossEntropyLoss:交叉熵损失Entropy熵:1948年,香农将统计物理中熵的概念,引申到信道通信的过程中,从而开创了信息论这门学科,把信息中排除了冗余后的平均信息量称为“信息熵”。香农定义的“熵”又被称为香农熵或信息熵,即......
  • [github] github访问加速工具**FastGithub**
    1、简介FastGithub是GitHub访问加速神器,主要解决GitHub打不开、用户头像无法加载、releases无法上传下载、git-clone、git-pull、git-push失败等一系列问题。2、下载地址​github:github百度云:百度云3、双击FastGithub.UI.exe运行......
  • AI大模型加速RPAxAI时代到来,谁会是RPA领域的杀手级应用?
    GPT等AI大模型震撼来袭,基于RPA的超级自动化仍是最佳落地载体文/王吉伟关于RPA已死的说法,在中国RPA元年(2019年)投资机构疯狂抢项目之时就已经有了。说它会死的,一般会认为RPA是一种过时的技术,一种打补丁的技术,一种不稳定的技术。在很多人眼里,依赖UI抓取实现的自动化,最终都会被基于API......