Flutter Snippet สำหรับ Android Studio

ธันวาคม 8, 2018 benznest

Off

Post Views: 3,105

สวัสดีครับ ช่วงนี้ผมกำลังเขียน Flutter จะบอกว่ามันสนุกมาก เจ้า Flutter สามารถเขียนด้วย VS Code หรือ Android Studio ก็ได้ ให้เลือกใช้แล้วแต่ถนัด ส่วนตัวผมถนัด Android Studio มากกว่า เพราะถนัดพวก Shortcut key ต่างๆ ทีนี้ปัญหาที่พบคือใน Android Studio ไม่มี Snippet ของ Flutter จะมีแค่พวก stful stless ที่ติดมาให้ หาใน Plugin ก็ไม่มี (หรือหาไม่เจอก็ไม่รู้) แต่ใน Extension ของ VS Code มีเพียบ ผมก็เลยเอา Snippet มาใส่ใน Android Studio ซะเลย โดยใน Android Studio เรียกว่า Live template แล้วก็เอามาแชร์เผื่อเป็นประโยชน์ครับ

การติดตั้ง

ดาวน์โหลดไฟล์ .jar
https://github.com/benznest/flutter-snippet/raw/master/flutter-snippet.jar

จากนั้นไปที่ Android Studio > File > Import Settings แล้วเลือกไฟล์ .jar

แล้วจะมีหน้าต่างแสดงรายละเอียด ให้ติ๊ก Live template กด Ok

การใช้งาน

ใช้ prefix นำหน้าด้วยคำว่า flt
ใช้ได้ในไฟล์ .dart เท่านั้น และคำสั่งแบ่งเป็น 2 ระดับคือ
Top level คือ เรียกได้เฉพาะนอก method เช่น คำสั่งสร้าง StatefulWidget
Statement คือ เรียกได้เฉพาะใน method เช่น คำสั่งสร้าง Button

เช่น คำสั่ง flt stful run app

Snippet สำหรับ Flutter

ส่วนใหญ่จะเป็นโค้ดที่ใช้บ่อยๆ ใน Flutter

`flt animation→`	StatefulWidget and Animation Controller
`flt btn raise→`	Raised button widget and Text child
`flt btn flat`	Flat button widget and Text child
`flt btn flat icon`	Flat button widget and Icon child
`flt btn bar`	Btton bar widget
`flt build→`	Build widget method
`flt card→`	Basic card widget
`flt center→`	Center widget
`flt column→`	Column widget
`flt container radius→`	Container and Radius border
`flt import cupertino→`	Add importing cupertino library
`flt cupert segment control→`	Custom Segmented Control
`flt cupert show datetime dialog→`	Show Cupertino datetime dialog
`flt duw→`	didUpdateWidget function
`flt dispose→`	dispose function
`flt drawer→`	Drawer widget
`flt expand→`	Expanded widget
`flt form validate→`	Basic form validation
`flt gesture→`	Gesture Detector Widget
`flt gridview builder→`	Custom Gridview with Builder
`flt icon→`	Icon widget
`flt img asset→`	Image Asset widget
`flt img url→`	Load image from URL
`flt init→`	initState function
`flt listview→`	Basic Listview
`flt listview builder→`	Custom Listview with Builder
`flt import material→`	Add importing material library
`flt material route→`	Material route
`flt model→`	Custom Model class and json converter
`flt navigate pop→`	Pop page function
`flt navigate push→`	Push page function
`flt newinstance→`	newIntance function
`flt orientation→`	Check Orientation
`flt padding→`	Padding widget
`flt popup menu`	Basic Popup menu
`flt row→`	Row widget
`flt setstate→`	setState function
`flt show dialog→`	showDialog function
`flt snackbar→`	Snack Bar widget
`flt stful→`	StatefulWidget and build function
`flt stful anim→`	StatefulWidget and Animation Controller
`flt stful run app→`	StatefulWidget MaterialApp runApp and Simple Scaffold
`flt stful scff floating→`	StatefulWidget Simple Scaffold and Floating button
`flt stless→`	Basic StatelessWidget
`flt text→`	Text widget
`flt text style→`	TextStyle widget
`flt theme data→`	ThemeData and color
`flt timer→`	Timer widget

การ import สามารถพิมพ์ flt imp ได้เลย

Snippet สำหรับ HTTP library

Snippet สำหรับ http library

`flt http client→`	Create client for multi request in sequence
`flt http fetch method→`	fetch data from network function
`flt http get→`	Send request with GET method
`flt http post→`	Send request with POST method
`flt import http→`	Add importing http library

Snippet สำหรับ Redux on Flutter

`flt import redux→`	Add importing redux library
`flt redux app full→`	Simple Redux App
`flt redux connector→`	Connector redux widget
`flt redux store→`	Store variable
`flt redux store provider→`	StoreProvider widget

Snippet สำหรับ Shared Preferences

`flt import sharepref→`	Add importing Shared Preference library
`flt sharepref get→`	Get data from Shared Preference
`flt sharepref set→`	Set data to Shared Preference

Snippet สำหรับ Sqflite

`flt import sqflite→`	Add importing Sqflite library
`flt sqflite get→`	Get data from Sqflite
`flt sqflite provider→`	Provider for Sqflite

Snippet สำหรับ Cupertino Seeting

`flt import cupert setting`	Add importing Cupertino Setting library
`flt cupert sett btn→`	Cupertino Setting Button Widget
`flt cupert sett control→`	Cupertino Setting Control Widget
`flt cupert sett head→`	Cupertino Setting Header Widget
`flt cupert sett select`	Cupertino Setting Select Widget
`flt cupert sett style`	Cupertino Setting Style Widget
`flt cupert setting`	Cupertino Setting Full Widget

การปิด Snippet ที่ไม่ใช้

สามารถปิดตัวที่ไม่ใช้ โดยเข้าไปที่ File >Setting > Editor > Live Templates เช่น ถ้ามไม่ได้ใช้ Redux ก็ปิดมัน เพื่อให้การทำงานไวขึ้น

รายละเอียดต่างๆอยู่ที่ Github ด้วย

https://github.com/benznest/flutter-snippet

benzneststudios