📚 目錄

1. SDK 下載
2. 配置環境變量
3. 安裝 flutter
4. 搭建 Android 環境
5. SDK 和依賴升級
6. IDE 配置與使用
   1. Android Studio 配置與使用
   2. VS Code 配置與使用
7. 真機調試

---

本文學習和引用自《Flutter實戰·第二版》：作者：杜文

1. SDK下載

前置需要操作系統 window 7 或更高版本，且安裝了 Git 命令行工具

• 首先去 flutter 官網下載其最新可用的安裝包，下載地址：傳送門
• 將安裝包 zip 解壓到你想安裝 flutter SDK 的路徑（如：D:\flutter。注意，不要將 flutter 安裝到需要一些高權限的路徑如 C:\Program Files\）

2. 配置環境變量

如果你想在 Windows 系統自帶命令行運行 flutter 命令，需要添加以下環境變量到用戶 PATH

• 在開始菜單的搜索功能鍵入env，然后選擇編輯系統環境變量
• 在用戶變量下檢查是否有名為Path的條目
• 在Path中添加flutter\bin的全路徑，使用;作為分隔符，比如：D:\flutter\bin
• 保存更改

3. 安裝flutter

• 打開命令行，執行flutter doctor命令，查看是否還需要安裝其他依賴，如果需要，安裝它們
• 第一次運行 flutter 命令時，它會下載它自己的依賴項并自行編譯。以后再運行就會快得多

4. 搭建Android環境

flutter 依賴于 Android Studio 的全量安裝。Android Studio 不僅可以管理 Android 平臺依賴、SDK 版本等，而且它也是 flutter 開發推薦的 IDE 之一

• 下載安裝 Android Studio，下載地址：傳送門
• 啟動 Android Studio，然后跟著安裝向導操作。勾選安裝最新的 Android SDK、Android SDK 平臺工具和 Android SDK 構建工具

5. SDK和依賴升級

• flutter SDK 有多個分支，如 beta、dev、master、stable，一般都是使用 stable。查看分支可以運行：

flutter channel

• 要升級 flutter sdk，只需在命令行運行：

flutter upgrade

• 如果你只想更新項目依賴包，可以使用：

flutter pub get

注意：flutter2.0 請使用：flutter packages get

6. IDE配置與使用

flutter 官方建議使用 Android Studio 或者 VS Code 進行開發，以獲得更好的開發體驗。

6-1. AndroidStudio配置與使用

• 首先下載好 Android Studio，然后按照如下步驟進行配置：

  • 啟動 Android Studio
  • 點擊左上角：file > Settings > Plugins > Browse repositories…，搜索 flutter 插件并點擊 install
  • 重啟 Android Studio 后插件生效

• Android Studio 可以直接創建一個 flutter 項目，步驟如下：

  • 點擊左上角：file > new > new flutter project
  • 選擇 flutter 項目模板，然后點擊 next
  • 輸入項目名稱，然后點擊 finish
  • 等待 Android Studio 安裝 SDK 并創建項目
  • 到 Android Studio 工具欄，點擊綠色的 Run 圖標
  • 顯示出模擬器則啟動完成

6-2. VSCode配置與使用

• 首先下載好 VS Code，然后按照如下步驟進行配置：
  • 點擊左上角：View > Command Palette…
  • 在搜索框輸入 flutter，然后點擊 Install
  • 點擊左上角：View > Command Palette…，輸入 flutter, 然后選擇 Flutter: New Project，按步驟確定
  • 等待項目創建繼續，并顯示 main.dart 文件
  • 按下 F5，顯示出模擬器則啟動完成

7. 真機調試

想要在真機上運行項目，步驟如下：

• 使用 USB 將手機插入電腦，在 Android 手機上啟用開發人員選項和 USB 調試
• 如果設備出現調試授權提示，請授權你的電腦可以訪問該設備
• 到 Android Studio 工具欄，點擊 Device Selection，選擇真機設備名
• 點擊綠色 Run 圖標
• 手機會自動安裝項目，點同意即可

---

本次分享就到這兒啦，我是鵬多多，如果您看了覺得有幫助，歡迎評論，關注，點贊，轉發，我們下次見~

往期文章

• Vue2全家桶+Element搭建的PC端在線音樂網站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超詳細！Vue的九種通信方式
• 超詳細！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• vue中利用.env文件存儲全局環境變量，以及配置vue啟動和打包命令
• 超詳細！Vue-Router手把手教程

個人主頁

• CSDN
• GitHub
• 簡書
• 博客園
• 掘金