iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
自我挑戰組

30天學習flutter系列 第 2

2.準備與安裝環境

  • 分享至 

  • xImage
  •  

今天開始來建置並安裝環境,這邊以Windows為例,來建置環境

建置環境

0.系統要求:

  1. OS: Windows 10 or later (64-bit), x86-64 based.
  2. 硬碟空間: 1.64 GB (does not include disk space for IDE/tools).
  3. 工具:
    • Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
    • Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.

1.安裝 Flutter SDK

Flutter官網 Install

安裝Flutter SDK (flutter_windows_3.3.2-stable)

打開壓縮檔會看到flutter的資料夾,將他放在要安裝的目錄(像是C:\等等)
https://ithelp.ithome.com.tw/upload/images/20220917/20108931X1tmqeN6h7.png

我是放在F槽
https://ithelp.ithome.com.tw/upload/images/20220917/2010893154zJNLqk1S.png
(!別將資料夾放在像是C:\Program Files\等需要提高權限之類的目錄內)

2.加入環境變數

打開環境變數
https://ithelp.ithome.com.tw/upload/images/20220917/20108931iOwAMfmm5U.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931URfzMLRaHd.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931hnxkIae0hp.png

打開並將flutter\bin加入到使用者變數,並將環境變數加入到Path中(我也有把她加入到系統變數中)
https://ithelp.ithome.com.tw/upload/images/20220917/20108931xLrH4IJrAt.png

https://ithelp.ithome.com.tw/upload/images/20220917/201089317CLY557Pdy.png

3.測試

我們已經成功加入環境變數了,我們打開terminal來測試一下

> flutter --version

https://ithelp.ithome.com.tw/upload/images/20220917/201089312H7RetspuX.png

我的環境上

  • flutter版本: 3.0.3
  • 工具:
    • Dart 2.17.5
    • DevTools 2.12.2

4.檢查各平台依賴建置工具

透過指令來檢查是否有把各平台的依賴給安裝完成

> flutter doctor

https://ithelp.ithome.com.tw/upload/images/20220917/201089316U6hutr5ac.png

5.各平台依賴建置工具設定

5-1.Android平台

  1. 安裝 Android Studio

  2. 啟動 Android Studio,然後通過“Android Studio Setup Wizard"。這會安裝最新的 Android SDK、Android SDK 命令行工具和 Android SDK Build-Tools,這些都是 Flutter 在為 Android 開發時需要的。

或者啟動SDK Manager來進行安裝
https://ithelp.ithome.com.tw/upload/images/20220917/20108931WSqinJb3ya.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931eUQKDEcKRb.png

4.打開Virtual Device Manager來創建模擬器
https://ithelp.ithome.com.tw/upload/images/20220917/20108931CaNtlZvgDC.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931OtIyTxjSo4.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931QKbGUfNrr2.png

5.在terminal輸入flutter doctor --android-licenses來同意Android Licenses

6.在用flutter doctor檢查確認是否完成安裝

5-2.Windows平台

安裝Visual Studio 2022並安裝Desktop development with C++

或只安裝Visual Studio Build Tools 2022並安裝Desktop development with C++

vscode

新增擴充應用
https://ithelp.ithome.com.tw/upload/images/20220917/201089317FkpghUlhz.png
https://ithelp.ithome.com.tw/upload/images/20220917/20108931GEXNJ6N8dS.png

6.創建專案

ctrl+shift+p開啟命令欄並搜尋flutter
https://ithelp.ithome.com.tw/upload/images/20220917/20108931LYE6avt0eI.png

選擇template
https://ithelp.ithome.com.tw/upload/images/20220917/20108931iV5aZKPYkI.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931nmsmIWndTB.png

命名後自動創建專案
https://ithelp.ithome.com.tw/upload/images/20220917/20108931nHkpN27bSz.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931csFqfBdSSE.png

7.啟動模擬器並測試

開啟命令欄(ctrl+shift+p)並選擇啟動模擬器
https://ithelp.ithome.com.tw/upload/images/20220917/20108931i90Pc7WyTB.png

https://ithelp.ithome.com.tw/upload/images/20220917/20108931aWb0q7FtrB.png

啟動並且看到vscode以連接到模擬器
https://ithelp.ithome.com.tw/upload/images/20220917/20108931FtJhvhZ969.png

按下f5進行測試
https://ithelp.ithome.com.tw/upload/images/20220917/20108931JIjgI9vGsO.png

成功建立起一個專案
https://ithelp.ithome.com.tw/upload/images/20220917/20108931PmYdjCEKyW.png


我們今天成功建置起了flutter project,明天會開始探討flutter內部的架構,那麼我們明天見。


上一篇
1.介紹與前言
下一篇
3.Hello, flutter
系列文
30天學習flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言