版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/4184745d6983
转载请标明出处:https://www.jianshu.com/p/4184745d6983
本文出自 AWeiLoveAndroid的博客


Flutter系列博文链接 ↓:

工具安装:

  • Flutter从配置安装到填坑指南详解

Flutter基础篇:

  • 谷歌Flutter1.0正式版发布
  • Flutter基础篇(1)– 跨平台开发框架和工具集锦
  • Flutter基础篇(2)– 老司机用一篇博客带你快速熟悉Dart语法
  • Flutter基础篇(3)– Flutter基础全面详解
  • Flutter基础篇(4)– Flutter填坑全面总结
  • Flutter基础篇(5)– Flutter代码模板,解放双手,提高开发效率必备
  • Flutter基础篇(6)– 水平和垂直布局详解
  • Flutter基础篇(7)– Flutter更新错误全面解决方案(图文+视频讲解)
  • Flutter基础篇(8)– Flutter for Web详细介绍
  • Flutter基础篇(9)– 手把手教你用Flutter实现Web页面编写
  • Flutter1.9升级体验总结(Flutter Web 1.9最新版本填坑指南)

Flutter进阶篇:

  • Flutter进阶篇(1)– 手把手带你快速上手调试Flutter项目
  • Flutter进阶篇(2)– Flutter路由详解
  • Flutter进阶篇(3)– Flutter 的手势(GestureDetector)分析详解
  • Flutter进阶篇(4)– Flutter的Future异步详解
  • Flutter进阶篇(5)– 使用Flutter创建插件详解并发布到Pub库
  • Flutter进阶篇(6)– PageStorageKey、PageStorageBucket和PageStorage使用详解
  • Flutter进阶篇(7)– Flutter路由轻量级框架FRouter
Dart语法系列博文链接 ↓:

Dart语法基础篇:

  • Flutter基础篇(2)– 老司机用一篇博客带你快速熟悉Dart语法(这是Dart语法系列的第一篇)
  • Dart的语法详解系列篇(二)– 类与函数
  • Dart的语法详解系列篇(三)– mixin入门
  • Dart的语法详解系列篇(四)– 泛型、异步、库等有关详解
  • Dart2.6正式版发布,支持编译为native可执行文件

Dart语法进阶篇:

  • Dart语法进阶篇(一)– Dart源码的排序算法详解

使用Flutter开发的朋友们都有一个疑问,自带的快捷提示不是很丰富,没有你想要的功能,不管是Android Studio 还是IDEA,斗狠有局限性,有的朋友可能在用VSCode,那个插件有两个,我都试过都不好用,扩展性不好。于是我自己就写了一些常用Flutter代码模板,导入AS或者IDEA可以直接使用。

【说明】本文同步发布在github,欢迎star,https://github.com/AweiLoveAndroid/Flutter-learning


Flutter系列博文链接 ↓:

工具安装:

  • Flutter从配置安装到填坑指南详解

Flutter基础篇:

  • Flutter基础篇(1)– 跨平台开发框架和工具集锦
  • Flutter基础篇(2)– 老司机用一篇博客带你快速熟悉Dart语法
  • Flutter基础篇(3)– Flutter基础全面详解
  • Flutter基础篇(4)– Flutter填坑全面总结
  • Flutter基础篇(5)– Flutter代码模板,解放双手,提高开发效率必备
  • Flutter基础篇(6)– 水平和垂直布局详解
  • Flutter基础篇(7)– Flutter更新错误全面解决方案(图文+视频讲解)

Flutter进阶篇:

  • Flutter进阶篇(1)– 手把手带你快速上手调试Flutter项目
  • Flutter进阶篇(2)– Flutter路由详解
  • Flutter进阶篇(3)– Flutter 的手势(GestureDetector)分析详解
  • Flutter进阶篇(4)– Flutter的Future异步详解
Dart语法系列博文链接 ↓:
  • Flutter基础篇(2)– 老司机用一篇博客带你快速熟悉Dart语法(这是Dart语法系列的第一篇)
  • Dart的语法详解系列篇(二)– 类与函数
  • Dart的语法详解系列篇(三)– mixin入门
  • Dart的语法详解系列篇(四)– 泛型、异步、库等有关详解

一、使用说明

(1)不要对settings.jar文件进行任何修改,如果改坏了导入不进去或者导入之后无法正常使用,请重新下载settings.jar就可以了。
(2)导入之后,如果发现快捷键无法正常使用,请看看你的AS或者IDEA的代码提示匹配设置是否正常。
  • 设置模糊匹配的步骤:

Windows平台:

  • 旧版本AS:

File –> Settings –> Editor –> General –> Code Completion –> 在 Case sensitive completion 后面的选项改成NONE:进行模糊匹配。(First Letter:根据首字母进行匹配)

如下图所示:

frc 71e56a0d7dfb02d5a673ea1cca456316 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备
  • 新版本AS:

点击菜单栏File –> Settings –> Editor –> General –> Code Completion –> 只需要把 Match cases 前面的对勾去掉就可以了。(First letter only 意思是:首字母匹配。All letters 意思是:按所有字母适配。)

如下图所示:

frc 67c4f365344dff3d9f81a490f5d4967c - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

Mac上面的操作:

点击Android Studio -> Preferences -> Code Completion -> 然后在 Case sensitive completion 后面的选项改成None,进行模糊匹配。

frc 371201a234d5baa69baf6acbfd658649 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备
打开设置菜单
frc 0ec40aebcc12ae831e80433e8c57b4ec - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备
设置成None

二、导入方式

(1)AS或者IDEA用户的导入

Windows的导入:

首先打开github网址 https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/code_plugins/ 找到对应文件下载settings.jar文件。这个jar包只是一个模板配置而已,下载的时候随便放一个英文的路径下面存储都行。

然后,点击菜单栏 File–> Import Settings,然后找到刚下载的那个settings.jar,导入。

frc ab777f15468e2a75f357daba1bb34c85 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

然后选择Live templates以及Live templates(schemes),点击OK即可。

frc 719bc7ec5ba6dcb7b33cd1e758bf85ce - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

Mac的导入:

点击菜单栏 File–> Import Settings,然后找到刚下载的那个settings.jar,导入。

frc efd8537263ba17fbff7c4b1696cffbed - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

然后选择Live templates以及Live templates(schemes),点击OK即可。

frc 9c678f29bc30ae27060ab1776cec1730 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

Tips: 如果你不喜欢 new关键字, 你可以下载 no_new_keywords/settings.jar 文件, 否则请下载 have_new_keywords/settings.jar 这个文件。

(2)VSCode用户的导入

Windows的导入:

  • 对于VSCode用户来说,请下载dart.json文件,然后复制到C:UsersAdministratorAppDataRoamingCodeUsersnippets目录(Users是你电脑的用户名)里面即可,如已经存在,请替换就OK。

有人问:你是怎么知道是这个路径的?其实很简单:
Ctrl+Shift+P(或查看–>命令面板) ==> 输入preferences,选择Preferences: Configure User Snippets(配置用户代码片段),然后选择新建全局代码片段文件,就会自动跳到dart.json所在的本地路径。

frc 727ede199c1db99f3a199d4958862c47 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备
  • 或者你想麻烦一点的话,也可以这么做:
    1.Ctrl+Shift+P(或查看–>命令面板)。
    frc cedbc6ceef54163ab22ff96f90880655 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

2.然后输入preferences,选择Preferences: Configure User Snippets(配置用户代码片段)

frc 71bfca4472eef388eccef6164d0e37e8 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

3.然后输入dart,选择dart

frc dd4738094aef1a6c5c714293a1bdb54b - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

4.然后就会有一个dart.json文件出来了。

frc 963db642daf55bd196709654b2f84c42 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

5.然后把我的Github库里面的dart.json内容复制到这里面,保存即可。最终效果如下图所示:

frc 6f61dd5103093d8925aef022c8dd7697 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

Mac的导入:

  • 请下载dart.json文件,然后复制到/Library/Application Support/Code/User/snippets/目录(Users是你电脑的用户名)里面即可,如已经存在,请替换就OK,Mac用户注意了:这个路径貌似所需要权限。

有人问:你是怎么知道是这个路径的?其实很简单:
Command(或 Cmd)+ Shift + P(或View–>Command Palette(命令面板)) ==> 输入pref,选择Preferences: Configure User Snippets(配置用户代码片段),然后选择新建全局代码片段文件,就会自动跳到dart.json所在的本地路径。

frc 713083c0972a3c6e4e07a7fda96b00ef - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备
  • 或者你想麻烦一点的话,也可以这么做:

1.Command(或 Cmd)+ Shift + P(或View–>Command Palette(命令面板))。

frc a6dac0f4e14354cda902e4b849d0da25 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

2.然后输入pref就能看到很多候选项,选择Preferences: Configure User Snippets(配置用户代码片段)

frc fd8538ecfaee11a7d508660f422352af - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

3.然后输入da,选择dart

frc 087e74ba706d1afecedc802c7c4c4878 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

4.然后就会有一个dart.json文件出来了。

frc 0c2aecbd8c170ea25c448f0e67eae27f - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

5.然后把我的Github库里面的dart.json内容复制到这里面,保存即可。最终效果和winows是一样的,就不截图了。

Tips: 如果你不喜欢 new关键字, 你可以下载 no_new_keywords/dart.json 文件, 否则请下载 have_new_keywords/dart.json 这个文件。


三、支持的快捷键如下:

快捷键描述
bab创建AnimatedBuilder
bu创建Build()方法
bufb创建FutureBuilder
bulb创建LayoutBuilder
buob创建OrientationBuilder
bustf创建StatefulBuilder
bustr创建StreamBuilder
cc创建CustomClipper
cen创建Center
col创建Column
con创建完整的Container
cp自定义CustomPainter
csvCustomScrollView + SliverPadding创建列表,子控件带有边距
csv2使用CustomScrollView + SliverGrid创建列表
gv创建GridView.count
inh创建Inherited
lv创建基本的ListView
lvb创建ListView.builder
lvd创建带分割线的ListView
lvr创建RadioListTile,可以单选的item
lvt创建带有各种ListTile的ListView
mainstf创建 StatefulWidget 控件
mainstl创建 StatelessWidget 控件
me创建方法
mep创建私有方法
row创建Row
sb创建SizedBox
ssv创建SingleChildScrollView
stanim创建Stateful(带有 AnimationController)
stf创建完整的StatefulWidget,包含生命周期相关方法。
stl创建StatelessWidget
svc创建CustomScrollView
te创建一个标准的Text

四、部分使用示范图(以AS做示范)

mainstf 创建 StatefulWidget 控件:

frc fd3535c6db244b5678dc6d45655d9637 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

mainstl 创建 StatelessWidget 控件:

frc 6a3c4c2e4981cc22097a0e167e111a1f - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

stf 创建完整的StatefulWidget,包含生命周期相关方法。:

frc 5543c074bb1ede55cfa0215c6f55ee25 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

stl 创建StatelessWidget:

frc 49dcdff7694a1852ae2e76ed5fa8f14c - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

gv 创建 GridView.count:

frc 6f66e27ad3e4a8a4bcba16324f9c8ba6 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

lv 创建基本的ListView:

frc 0477ec3c1f7ee57d54d74b0f4cdd72e3 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

con 创建完整的Container:

frc 40d84093b71600ec520ff3f0eeb0c51f - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备
con创建完整的Container

五、关于代码模板的自定义方式

Dart模板基本组成部分

frc 5b489ea290a2a162a015bc964b6fe699 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备
image.png

Dart编辑模板字段

frc 1558adaf477fb2947ec8662e3c0850e2 - Flutter基础篇(5)-- Flutter代码模板,解放双手,提高开发效率必备

更多的自定义模板用法可以看我的Github: Android Studio常用模板用法和自定义模板

Flutter基础篇(5)– Flutter代码模板,解放双手,提高开发效率必备