久聞 Flutter 大名,今天終於有時間體驗一下了 ٩(๑>◡<๑)۶
中文官網:https://flutterchina.club/
一、下載Flutter SDK
1、下載
①官網下載:https://flutter.dev/docs/development/tools/sdk/releases#windows
②github下載:https://github.com/flutter/flutter/releases
2、解壓
將安裝包zip解壓到你想安裝Flutter SDK的路徑。
3、打開flutter命令行
在Flutter安裝目錄的flutter
文件下找到flutter_console.bat
,雙擊運行並啟動flutter命令行,接下來,你就可以在Flutter命令行運行flutter命令了。
二、下載Android Studio
下載安裝就行了,注意一下sdk的路徑,需要配置環境變量。
三、配置編輯器
編輯器我習慣用VS Code,在擴展商店搜索 ‘flutter’,安裝Flutter插件就可以了。
四、配置環境變量
1、鏡像
由於在國內訪問Flutter有時可能會受到限制,Flutter官方為中國開發者搭建了臨時鏡像,大家可以將如下環境變量加入到用戶環境變量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2、在Path中添加flutter\bin的全路徑,如下圖:
3、配置ANDROID_HOME,設置為SDK安裝目錄
五、連接設備
1、真機
手機連接電腦,在開發者選項中,打開USB調試,授權計算機訪問設備。
2、模擬器
這次沒有使用模擬器,之前做RN用過,電腦會比較卡。
六、創建新應用
- 啟動 VS Code
- 調用 View>Command Palette…
- 輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action
- 輸入 Project 名稱 (如
myapp
), 然后按回車鍵 - 指定放置項目的位置,然后按藍色的確定按鈕
- 等待項目創建繼續,並顯示main.dart文件
七、運行
1、在flutter命令行中運行 flutter doctor 命令,查看是否需要安裝任何依賴項來完成安裝。
該命令檢查您的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter里了,沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務(以粗體顯示)。
2、確保在VS Code的右下角選擇了目標設備
3、按 F5 鍵或調用Debug>Start Debugging
安裝成功即會在手機上看到如下應用程序。
下面是遇到的一些問題------------------------------
問題一:
安裝Android studio時出現unable to access android sdk add-on list
解決方法:
1、用記事本打開bin下面的idea.properties文件(xxx/android studio/bin/idea.properties);
2、在idea.properties最后一行加上:
disable.android.first.run=true
3、重啟電腦
問題二:
安裝Android studio后,用flutter doctor檢測,發現Android licenses not accepted
解決方法:
運行如下命令,然后都選擇y,接受,就可以了
flutter doctor --android-licenses
問題三:
在設備上運行程序失敗,如下圖:
解決方法:
配置ANDROID_HOME環境變量(這里上面有講到,但是我第一次運行時沒有配置,導致報錯)
END。