Flutter的環境搭配完之後,就開始Flutter的開發,下面的一些工具和方法,可以省下一些時間。
自己在用的,暫時想到的,就是這些了,總結一下。
1.JSON解析快速生成實體類
根據介面返回的資料,編寫實體類,新增兩個方法。
fromJson()方法是可以聰一個Map中構造出一個User的例項,toJson()方法,可以將一個例項轉化為Map。
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/acacf1cc6334482ecae6177f9f773c5aac0e41100e056c8aa8420a652e7dd27c.png)
如果介面返回的資料比較複雜點,那麼手動寫起來就會很麻煩。這個時候可以利用json_serializable來幫你自動生成實體類的一些程式碼,還有利用caijinglong.github.io/json2dart/i…來快速生成相關程式碼。
將json資料複製到這個網站上,就會生成相關的程式碼,只需要將這些程式碼複製到專案中的檔案就行了,
最後在我們的專案根目錄下執行flutter packages pub run build_runner build,我們可以在需要時為我們的model生成json序列化程式碼 。
注意:要先在pubspec.yaml檔案裡面新增:
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/3b1a437093adb6ac8385745d8728395633f6a6c8ba53631ae59b93d03ff4cf92.png)
每個類最後面生成的with _$UserSerializerMixin,這部分可以去掉,不去掉的話,好像生成會有問題,反正我是去掉了,沒什麼影響。
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/2bdcfe20fbef9f9792be261ea50c2498a26bc0d4993999f3c7f262ce27b1ccb3.png)
2.程式碼模板
最簡單的一個例子,就是在寫一個有狀態StatefulWidget的時候,要手動繼承StatefulWidget,重寫createState方法,再建立一個相應的State類並重寫build方法。會寫到你吐血。
這個時候就需要一些程式碼模板,幫你快速生成程式碼。
反正百度一下肯定有些匯入Flutter程式碼模板的教程。
比如直接打出stf,就可以自動提示生成StatefulWidget的程式碼了。
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/0eaf9afef5fabfceb1e53fa10e4742d6169c0bf9735c382c5af7061bbe8c9a9c.png)
3.Asset資原始檔的匯入
Flutter中,常見型別的asset包括靜態資料(例如JSON檔案),配置檔案,圖示和圖片(JPEG,WebP,GIF,動畫WebP / GIF,PNG,BMP和WBMP)。
一般匯入的資源都要在pubspec.yaml檔案中按照下面的方式,一個一個進行宣告,應用程式才能獲取到。
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/2394733dfe7cfc0c46ea4feb83df5268a990327ef4bb88057579ec7336ee30af.png)
改進方法:要包含asset檔案下面的所有資源,直接用下面這樣方法,這樣的話,只在這個目錄裡的檔案會被包含進來。
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/58a84f7db1c4c7f325c4ac9991b9952b51f0e452d45a5f9b728d84d668b9dd6a.png)
4.Flutter Outline工具,主要用於檢視的預覽,還有其他功能
在編寫佈局的時候,可以看到Flutter Outline介面,會實時地更新所寫的佈局層次,方便檢視。
除了檢視的預覽,還有其他的功能。
就是右鍵某一個widget,可以根據提示框,快速幫你在這個widget的外面包裝一層比如padding之類的程式碼。這個功能有時候挺方便的。
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/bfaf3edafa0906d9cb5d6d76a2b6b73f6ad12968525ac3ecd4deabb01aedae17.png)
Extract method的作用是:可以把某一個widget控制元件的程式碼,幫你封裝成一個方法。不用你去手動地去找出一個widget的全部程式碼,再自己拉到某一個方法內。
另一方面,也可以方便地看出這個widget的相關程式碼,比如要複製操作起來也比較方便。
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/7d94edb56ae1b528529b30d692acb79594929a0186380ba5092b58b7bcbed17e.png)
5.拖動widget自動生成相關程式碼
有一個網站:flutterstudio.app/
可以拖動widget到模擬器中,就可以生成相關的佈局程式碼,自己手動複製貼上就可以了。
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/a0f839cd64196a144331fa669c7212ebde310e053e739bfa29ea4e94479af3a3.png)
![Flutter提升開發效率的一些方法和工具](https://i.iter01.com/images/2aafd56f847ac99d848ae9251afd5a43aa04ae3d391f4648306e0ab794326ad0.png)