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 程式設計開發」微信公眾號 。