iT邦幫忙

2023 iThome 鐵人賽

DAY 2
0
Mobile Development

好好用的 flutter 套件系列 第 2

好好用的 flutter 套件 - Day 2 來一個flutter 的Demo App吧

  • 分享至 

  • xImage
  •  

前言:

開始 Flutter 第一個Demo App 吧 (如果是用Visual Studio Code就自行參考官網吧)

第一個Flutter Demo App

step1: 打Android Studio ,選 New Flutter Project

https://ithelp.ithome.com.tw/upload/images/20230916/20121643Jc5QJrzMM9.png

step2: 確認 Flutter SDK 路徑,然後下一步

https://ithelp.ithome.com.tw/upload/images/20230916/20121643dazQgd1ga3.png

step3: 取一個專案名稱,然後 create

https://ithelp.ithome.com.tw/upload/images/20230916/20121643ZpgFRKNRlQ.png

step4: 成功建立專案後,編譯一下 Code,到實機或模擬器

https://ithelp.ithome.com.tw/upload/images/20230916/20121643XxR2ltIxBa.png

玩一下Flutter 的 Hot Reload

把Flutter Demo Home Page 改成 Flutter Demo Day2 Home Page
選擇Save All ( Command + S/ Ctrl + S),或單擊工具欄上的Hot Reload 按鈕。
https://ithelp.ithome.com.tw/upload/images/20230916/20121643na8rO2RSBr.png

https://ithelp.ithome.com.tw/upload/images/20230916/20121643JnQUWkCj5S.png

成功執行熱重載後,應用程式將以你的更改進行更新,並保留應用程式當前的狀態。你的應用程式將繼續從之前運行熱重載命令的位置開始執行。程式碼被更新並繼續執行。

https://ithelp.ithome.com.tw/upload/images/20230916/201216439H5VNqKkgL.png

心得

在修改程式後,直接用 Flutter 的 Hot Reload 就可以看到 UI 改變的效果是不是很快很方便呀 

參考

https://docs.flutter.dev/tools/hot-reload


上一篇
好好用的 flutter 套件 - Day 1 前言及安裝和環境配置
下一篇
好好用的 flutter 套件 - Day 3 Packages
系列文
好好用的 flutter 套件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
arguskao
iT邦新手 3 級 ‧ 2023-10-03 16:12:15

我的Step2是這樣

https://ithelp.ithome.com.tw/upload/images/20231003/20121990lGkgYgDBOb.png

這是開android 專案,不是flutter 的專案呀

我要留言

立即登入留言