iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

30 天初探 Flutter系列 第 9

Day 9 - 人生中第一個 Flutter

  • 分享至 

  • xImage
  •  

我們有介紹過 Flutter 是什麼,但是覺得可以講一下為什麼 Flutter 是個不錯的選項,畢竟跨平台也不是只有 Flutter 還有很常見的 React Native

  • One codebase to rule them all

    不需要再分別學 Java, Swift, JavaScript, …,只需要學 Dart 語言,就可以一次建立 iOS apps, Android apps, Web apps,甚至是桌面應用程式。

  • A simple and flexible layout system

    Flutter 支援 Material Design,有豐富的元件,對整個 UI 設計上很方便,另外這邊還有個重點要提,就是 Flutter 的 Widget 不需要再透過中間層轉換才能溝通與渲染畫面,效能上提升很多,當然原生程式語言的效能還是最佳的,不過選擇原生的話就不能享有一兼二顧只需寫一套 code 的好處了。

  • Access to Original Source Code

    Flutter 是 open source,可以很方便的看原始碼,更快理解 Widgets 如何運作,甚至可以自己客製出一個你想要的 Widget。

大家還是可以使用自己熟悉的開發程式,那接著我就來簡單說一下使用 VSCode 需要安裝哪些擴充,很簡單:

  • Flutter (Dart 會一起被安裝)

結束!

另外有些方便開發時使用的就待後續慢慢補上囉~

新增 Flutter 專案

在指定的路徑下輸入

flutter create project_name

完成後指向該專案資料夾,並使用 VSCode 打開

cd project_name
code .

運行專案

flutter run

這時候會列出搜尋到的裝置,並詢問要使用哪個運行,我先選擇 2,這是透過 chrome 來啟動 APP 的 Debug 模式

Imgur

執行後,可以看到 chrome 視窗出現 Flutter Demo Home Page 的畫面

Imgur

可以試著點擊看看右下角的 + Button,中間的次數會往上增加~

恭喜你!成功運行了你的第一個 Flutter 專案~

OK!我們明天見~

後記:就在今天,我結束了我的第一次鐵人賽XD
對!匆匆忙忙的錯過了發文時間,進到發佈文章區已經是 00:00:06,不過還是希望自己可以堅持發完 30 篇文章,剩下的就當作經驗囉~


上一篇
Day 8 - Flutter 終於開場?
下一篇
Day 10 - Flutter 架構
系列文
30 天初探 Flutter14
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言