AS 使用 Flutter 代碼模板

AS 使用 Flutter 代碼模板

Android Studio 原本是用來開發 Android 的 IDE，經過安裝 Flutter 和 Dart 兩款插件就可使用 Android Studio 來進行 Flutter 應用程序開發了。

可是有一點不方便的就是，新建的 dart 文件，裏面沒有任何代碼，所有都要本身寫，有一些重複的代碼好比 StatefulWidget 這樣的模板，咱們但願工具可以自動生成，來簡化咱們的開發。AS 上有代碼模板的功能，咱們能夠經過新建 dart 的代碼模板來完成自動生成代碼的功能。

不管是 Mac 仍是 Windows ，均可以經過在 Setting 裏面搜索 Templates 找到這個設置。

Flutter 的代碼模板是經過 Velocity 模板引擎 來實現的，更詳細的資料能夠參考這裏。

1、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);
  }
}
複製代碼

2、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);
  }
}
複製代碼

3、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} {
}

複製代碼

4、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} {
}
複製代碼

5、使用

新建文件的時候，就可使用剛纔新建的代碼模板了。

好比新建一個名字爲 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 編程開發」微信公衆號 。