Flutter提升開發效率的一些方法和工具

入魔的冬瓜發表於2018-11-29

Flutter的環境搭配完之後,就開始Flutter的開發,下面的一些工具和方法,可以省下一些時間。

自己在用的,暫時想到的,就是這些了,總結一下。

1.JSON解析快速生成實體類

根據介面返回的資料,編寫實體類,新增兩個方法。

fromJson()方法是可以聰一個Map中構造出一個User的例項,toJson()方法,可以將一個例項轉化為Map。

Flutter提升開發效率的一些方法和工具

如果介面返回的資料比較複雜點,那麼手動寫起來就會很麻煩。這個時候可以利用json_serializable來幫你自動生成實體類的一些程式碼,還有利用caijinglong.github.io/json2dart/i…來快速生成相關程式碼。

將json資料複製到這個網站上,就會生成相關的程式碼,只需要將這些程式碼複製到專案中的檔案就行了,

最後在我們的專案根目錄下執行flutter packages pub run build_runner build,我們可以在需要時為我們的model生成json序列化程式碼 。

注意:要先在pubspec.yaml檔案裡面新增:

Flutter提升開發效率的一些方法和工具

每個類最後面生成的with _$UserSerializerMixin,這部分可以去掉,不去掉的話,好像生成會有問題,反正我是去掉了,沒什麼影響。

Flutter提升開發效率的一些方法和工具

2.程式碼模板

最簡單的一個例子,就是在寫一個有狀態StatefulWidget的時候,要手動繼承StatefulWidget,重寫createState方法,再建立一個相應的State類並重寫build方法。會寫到你吐血。

這個時候就需要一些程式碼模板,幫你快速生成程式碼。

反正百度一下肯定有些匯入Flutter程式碼模板的教程。

比如直接打出stf,就可以自動提示生成StatefulWidget的程式碼了。

Flutter提升開發效率的一些方法和工具

3.Asset資原始檔的匯入

Flutter中,常見型別的asset包括靜態資料(例如JSON檔案),配置檔案,圖示和圖片(JPEG,WebP,GIF,動畫WebP / GIF,PNG,BMP和WBMP)。

一般匯入的資源都要在pubspec.yaml檔案中按照下面的方式,一個一個進行宣告,應用程式才能獲取到。

Flutter提升開發效率的一些方法和工具

改進方法:要包含asset檔案下面的所有資源,直接用下面這樣方法,這樣的話,只在這個目錄裡的檔案會被包含進來。

Flutter提升開發效率的一些方法和工具

4.Flutter Outline工具,主要用於檢視的預覽,還有其他功能

在編寫佈局的時候,可以看到Flutter Outline介面,會實時地更新所寫的佈局層次,方便檢視。

除了檢視的預覽,還有其他的功能。

就是右鍵某一個widget,可以根據提示框,快速幫你在這個widget的外面包裝一層比如padding之類的程式碼。這個功能有時候挺方便的。

Flutter提升開發效率的一些方法和工具

Extract method的作用是:可以把某一個widget控制元件的程式碼,幫你封裝成一個方法。不用你去手動地去找出一個widget的全部程式碼,再自己拉到某一個方法內。

另一方面,也可以方便地看出這個widget的相關程式碼,比如要複製操作起來也比較方便。

Flutter提升開發效率的一些方法和工具

5.拖動widget自動生成相關程式碼

有一個網站:flutterstudio.app/

可以拖動widget到模擬器中,就可以生成相關的佈局程式碼,自己手動複製貼上就可以了。

Flutter提升開發效率的一些方法和工具

Flutter提升開發效率的一些方法和工具

相關文章