AS 使用 Flutter 代码模板

微信扫一扫,分享到朋友圈

AS 使用 Flutter 代码模板

AS 使用 Flutter 代码模板

Android Studio 本来是用来开发 Android 的 IDE,通过安装 Flutter 和 Dart 两款插件就可以使用 Android Studio 来进行 Flutter 应用程序开发了。

但是有一点不方便的就是,新建的 dart 文件,里面没有任何代码,全部都要自己写,有一些重复的代码比如 StatefulWidget 这样的模板,我们希望工具能够自动生成,来简化我们的开发。AS 上有代码模板的功能,我们可以通过新建 dart 的代码模板来完成自动生成代码的功能。

无论是 Mac 还是 Windows ,都可以通过在 Setting 里面搜索 Templates 找到这个设置。

Flutter 的代码模板是通过 Velocity 模板引擎 来实现的,更详细的资料可以参考 这里

一、StatelessWidget 代码模板

在 File and Code Templates 里,选择 Files 一栏,点击左上角加号,新建名字是 StatelessWidget ,扩展名为 dart 的代码模板。

模板如下

import 'package:flutter/material.dart';
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
class ${class} extends StatelessWidget {
${class}({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(color: Colors.blue);
}
}
复制代码

二、StatefulWidet 代码模板

import 'package:flutter/material.dart';
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
class ${class} extends StatefulWidget {
${class}({Key key}) : super(key: key);
@override
_${class}State createState() => _${class}State();
}
class _${class}State extends State<${class}> {
@override
Widget build(BuildContext context) {
return Container(color: Colors.blue);
}
}
复制代码

三、Mixin 代码模板

#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
mixin ${class} {
}
复制代码

四、Extension 代码模板

#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
#set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
extension ${class} on ${on} {
}
复制代码

五、使用

新建文件的时候,就可以使用刚才新建的代码模板了。

比如新建一个名字为 TestTemplate 使用 StatefulWidget 模板的文件,最终生成的文件里面自动生成的代码如下

class Testtemplate extends StatefulWidget {
Testtemplate({Key key}) : super(key: key);
@override
_TesttemplateState createState() => _TesttemplateState();
}
class _TesttemplateState extends State<Testtemplate> {
@override
Widget build(BuildContext context) {
return Container(color: Colors.blue);
}
}
复制代码

github

欢迎关注「Flutter 编程开发」微信公众号 。

超硬核的Java工程师分享,什么是Java?为什么我要做Java,我是如何学习Java的?

上一篇

SpringBoot 入门:10 - 统一异常处理

下一篇

你也可能喜欢

AS 使用 Flutter 代码模板

长按储存图像,分享给朋友