版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。http://www.lxweimin.com/p/4184745d6983
轉(zhuǎn)載請標明出處：http://www.lxweimin.com/p/4184745d6983
本文出自 AWeiLoveAndroid的博客
Flutter系列博文鏈接 ↓：
工具安裝：
Flutter基礎(chǔ)篇：
- 谷歌Flutter1.0正式版發(fā)布
- Flutter基礎(chǔ)篇（1）-- 跨平臺開發(fā)框架和工具集錦
- Flutter基礎(chǔ)篇（2）-- 老司機用一篇博客帶你快速熟悉Dart語法
- Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
- Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
- Flutter基礎(chǔ)篇（5）-- Flutter代碼模板，解放雙手，提高開發(fā)效率必備
- Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
- Flutter基礎(chǔ)篇（7）-- Flutter更新錯誤全面解決方案(圖文+視頻講解)
- Flutter基礎(chǔ)篇（8）-- Flutter for Web詳細介紹
- Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實現(xiàn)Web頁面編寫
- Flutter1.9升級體驗總結(jié)（Flutter Web 1.9最新版本填坑指南）
Flutter進階篇：
- Flutter進階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項目
- Flutter進階篇（2）-- Flutter路由詳解
- Flutter進階篇（3）-- Flutter 的手勢（GestureDetector）分析詳解
- Flutter進階篇（4）-- Flutter的Future異步詳解
- Flutter進階篇（5）-- 使用Flutter創(chuàng)建插件詳解并發(fā)布到Pub庫
- Flutter進階篇（6）-- PageStorageKey、PageStorageBucket和PageStorage使用詳解
- Flutter進階篇（7）-- Flutter路由輕量級框架FRouter
Dart語法系列博文鏈接 ↓：
Dart語法基礎(chǔ)篇：
Dart語法進階篇：
使用Flutter開發(fā)的朋友們都有一個疑問，自帶的快捷提示不是很豐富，沒有你想要的功能，不管是Android Studio 還是IDEA，斗狠有局限性，有的朋友可能在用VSCode，那個插件有兩個，我都試過都不好用，擴展性不好。于是我自己就寫了一些常用Flutter代碼模板，導入AS或者IDEA可以直接使用。
【說明】本文同步發(fā)布在github，歡迎star，https://github.com/AweiLoveAndroid/Flutter-learning
Flutter系列博文鏈接 ↓：
工具安裝：
Flutter基礎(chǔ)篇：
Flutter進階篇：
Dart語法系列博文鏈接 ↓：
一、使用說明
（1）不要對settings.jar文件進行任何修改,如果改壞了導入不進去或者導入之后無法正常使用，請重新下載settings.jar就可以了。
（2）導入之后，如果發(fā)現(xiàn)快捷鍵無法正常使用，請看看你的AS或者IDEA的代碼提示匹配設置是否正常。
- 設置模糊匹配的步驟：
Windows平臺：
- 舊版本AS：
File --> Settings --> Editor --> General --> Code Completion --> 在 Case sensitive completion 后面的選項改成NONE:進行模糊匹配。(First Letter：根據(jù)首字母進行匹配)
如下圖所示：
- 新版本AS：
點擊菜單欄File --> Settings --> Editor --> General --> Code Completion --> 只需要把 Match cases 前面的對勾去掉就可以了。（First letter only 意思是：首字母匹配。All letters 意思是：按所有字母適配。）
如下圖所示：
Mac上面的操作：
點擊Android Studio -> Preferences -> Code Completion -> 然后在 Case sensitive completion 后面的選項改成None，進行模糊匹配。
二、導入方式
（1）AS或者IDEA用戶的導入
Windows的導入：
首先打開github網(wǎng)址 https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/code_plugins/ 找到對應文件下載settings.jar文件。這個jar包只是一個模板配置而已，下載的時候隨便放一個英文的路徑下面存儲都行。
然后，點擊菜單欄 File--> Import Settings，然后找到剛下載的那個settings.jar，導入。
然后選擇Live templates以及Live templates(schemes)，點擊OK即可。
Mac的導入：
點擊菜單欄 File--> Import Settings，然后找到剛下載的那個settings.jar，導入。
然后選擇Live templates以及Live templates(schemes)，點擊OK即可。
Tips: 如果你不喜歡 new關(guān)鍵字, 你可以下載 no_new_keywords/settings.jar 文件, 否則請下載 have_new_keywords/settings.jar 這個文件。
（2）VSCode用戶的導入
Windows的導入：
- 對于VSCode用戶來說，請下載
dart.json文件，然后復制到C:\Users\Administrator\AppData\Roaming\Code\User\snippets目錄（Users是你電腦的用戶名）里面即可，如已經(jīng)存在，請?zhí)鎿Q就OK。
有人問：你是怎么知道是這個路徑的？其實很簡單：
Ctrl+Shift+P（或查看-->命令面板） ==> 輸入preferences，選擇Preferences: Configure User Snippets（配置用戶代碼片段），然后選擇新建全局代碼片段文件，就會自動跳到dart.json所在的本地路徑。
- 或者你想麻煩一點的話，也可以這么做：
1.Ctrl+Shift+P（或查看-->命令面板）。
2.然后輸入preferences，選擇Preferences: Configure User Snippets（配置用戶代碼片段）。
3.然后輸入dart，選擇dart。
4.然后就會有一個dart.json文件出來了。
5.然后把我的Github庫里面的dart.json內(nèi)容復制到這里面，保存即可。最終效果如下圖所示：
Mac的導入：
- 請下載
dart.json文件，然后復制到/Library/Application Support/Code/User/snippets/目錄（Users是你電腦的用戶名）里面即可，如已經(jīng)存在，請?zhí)鎿Q就OK，Mac用戶注意了：這個路徑貌似所需要權(quán)限。
有人問：你是怎么知道是這個路徑的？其實很簡單：
Command（或 Cmd）+ Shift + P（或View-->Command Palette（命令面板）） ==> 輸入pref，選擇Preferences: Configure User Snippets（配置用戶代碼片段），然后選擇新建全局代碼片段文件，就會自動跳到dart.json所在的本地路徑。
- 或者你想麻煩一點的話，也可以這么做：
1.Command（或 Cmd）+ Shift + P（或View-->Command Palette（命令面板））。
2.然后輸入pref就能看到很多候選項，選擇Preferences: Configure User Snippets（配置用戶代碼片段）。
3.然后輸入da，選擇dart。
4.然后就會有一個dart.json文件出來了。
5.然后把我的Github庫里面的dart.json內(nèi)容復制到這里面，保存即可。最終效果和winows是一樣的，就不截圖了。
Tips: 如果你不喜歡
new關(guān)鍵字, 你可以下載 no_new_keywords/dart.json 文件, 否則請下載 have_new_keywords/dart.json 這個文件。
三、支持的快捷鍵如下：
| 快捷鍵 | 描述 |
|---|---|
| bab | 創(chuàng)建AnimatedBuilder |
| bu | 創(chuàng)建Build()方法 |
| bufb | 創(chuàng)建FutureBuilder |
| bulb | 創(chuàng)建LayoutBuilder |
| buob | 創(chuàng)建OrientationBuilder |
| bustf | 創(chuàng)建StatefulBuilder |
| bustr | 創(chuàng)建StreamBuilder |
| cc | 創(chuàng)建CustomClipper |
| cen | 創(chuàng)建Center |
| col | 創(chuàng)建Column |
| con | 創(chuàng)建完整的Container |
| cp | 自定義CustomPainter |
| csv | CustomScrollView + SliverPadding創(chuàng)建列表，子控件帶有邊距 |
| csv2 | 使用CustomScrollView + SliverGrid創(chuàng)建列表 |
| gv | 創(chuàng)建GridView.count |
| inh | 創(chuàng)建Inherited |
| lv | 創(chuàng)建基本的ListView |
| lvb | 創(chuàng)建ListView.builder |
| lvd | 創(chuàng)建帶分割線的ListView |
| lvr | 創(chuàng)建RadioListTile，可以單選的item |
| lvt | 創(chuàng)建帶有各種ListTile的ListView |
| mainstf | 創(chuàng)建 StatefulWidget 控件 |
| mainstl | 創(chuàng)建 StatelessWidget 控件 |
| me | 創(chuàng)建方法 |
| mep | 創(chuàng)建私有方法 |
| row | 創(chuàng)建Row |
| sb | 創(chuàng)建SizedBox |
| ssv | 創(chuàng)建SingleChildScrollView |
| stanim | 創(chuàng)建Stateful（帶有 AnimationController） |
| stf | 創(chuàng)建完整的StatefulWidget，包含生命周期相關(guān)方法。 |
| stl | 創(chuàng)建StatelessWidget |
| svc | 創(chuàng)建CustomScrollView |
| te | 創(chuàng)建一個標準的Text |
四、部分使用示范圖（以AS做示范）
mainstf 創(chuàng)建 StatefulWidget 控件：
mainstl 創(chuàng)建 StatelessWidget 控件：
stf 創(chuàng)建完整的StatefulWidget，包含生命周期相關(guān)方法。：
stl 創(chuàng)建StatelessWidget：
gv 創(chuàng)建 GridView.count：
lv 創(chuàng)建基本的ListView：
con 創(chuàng)建完整的Container：
五、關(guān)于代碼模板的自定義方式
Dart模板基本組成部分
Dart編輯模板字段
更多的自定義模板用法可以看我的Github： Android Studio常用模板用法和自定義模板
