---
# System prepended metadata

title: Flutter 自學筆記
tags: [程式語言, Programming language, Flutter]

---

Flutter 自學筆記
===
###### tags: `Flutter` `Programming language` `程式語言`

下載安裝 [Android Studio](https://developer.android.com/studio)
下載安裝 [Flutter SDK](https://flutter.dev/docs/get-started/install/windows)

---

設定環境變數 Flutter SDK 的 bin 目錄到 Path 裡
cmd 模式輸入 flutter doctor 可以檢查環境設定是否正確
![](https://i.imgur.com/9JS5sh0.png)
第一次安裝有！驚嘆號是正常的
等等會一一設定並排除問題

---

Android Studio 安裝 flutter 的 Plugins
![](https://i.imgur.com/usPgVym.png)
![](https://i.imgur.com/kmdAcp9.png)
建立一個「AVD」虛擬裝置
![](https://i.imgur.com/aFnuAmt.png)
點選 AVD Manager
![](https://i.imgur.com/keahRKn.png)
按下 Create Virtual Device
選一下虛擬裝置 Pixel 3 -> Pie
![](https://i.imgur.com/i6gELuZ.png)
按下右邊三角形 Play 按鍵
左邊就會開啟一個手機的模擬介面


---

VSCode 要安裝一下插件 flutter 與 Dart
![](https://i.imgur.com/WARskok.png)


---

建立 flutter 專案可以輸入 flutter create app
![](https://i.imgur.com/hhR8t1b.png)
由於使用 flutter 開發
所以作業都會在 app 裡的 lib 目錄
main.dart 檔案
用 Dart 語言編輯
![](https://i.imgur.com/2BD4Ei5.png)
抓到 AVD 虛擬裝置了
按下偵錯啟用 F5
![](https://i.imgur.com/YRN9WH3.png)
除此之外 還可以在 cmd 模式可以輸入 flutter run
![](https://i.imgur.com/0s9qbfX.png)
左邊白色是 flutter 的手機模擬視窗
右邊 cmd 按下熱鍵 q 可以離開 flutter

PS.特別提一下 pubspec.yaml 可以安裝套件
而且支援 hot reload

---

可惡 居然出現錯誤訊息
```bash=

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
     build-tools;28.0.3 Android SDK Build-Tools 28.0.3
     platforms;android-28 Android SDK Platform 28
  To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
  Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

  Using Android SDK: C:\Users\chiis\AppData\Local\Android\sdk

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 3s
Exception: Gradle task assembleDebug failed with exit code 1
Exited (sigterm)
```
輸入了 flutter doctor --android-licenses
看看設定是否正常
flutter run
在再編譯一次就正常了
VSCode 也正常了
不過會啟動 Dart DevTools
![](https://i.imgur.com/fPee0Ub.png)

編譯還蠻久的...去喝杯茶吧

---

寫你的第一支 Flutter 程式
參考 [Write your first Flutter app, part 1](https://flutter.dev/docs/get-started/codelab)
把剛剛 main.dart 的程式碼都刪除
複製網頁上的程式碼並貼上







## 參考資料
[2019-09-26 Flutter入門-Flutter安裝(windows平台) （ 00 ）](https://www.youtube.com/watch?v=QgO-1XjWo40)



###### tags: `Flutter`