Flutter 專題目錄匯總: 這個目錄方便大家快速查詢你要學習的內容!!!

這個篇章我們一起快速搭建 Flutter 的開發(fā)環(huán)境，同時會將搭建Flutter 開發(fā)環(huán)境中的一些技巧和經驗分享給大家。
Flutter環(huán)境配置看我這一篇就夠了! ??????

如果你在搭建 Flutter 的開發(fā)環(huán)境, 可以在留言區(qū)及時留言,我盡量會在第一時間和你聯系 ??

一、Android下玩Flutter

1.下載并安裝 Android Studio

這個地址下載可能會比較快一點: https://developer.android.google.cn/studio

2: 關于Android Studio配置

這里推薦一個非常非常詳細的配置文檔:

https://www.cnblogs.com/mengtaoadmin/p/11184052.html

如果大家還需額外配置或者遇到疑問的大家可以直接去Android官網查閱和交流

https://developer.android.google.cn/studio/intro

image

OK , 到這里我們暫時配置好安卓環(huán)境! 接下面去去安裝 Flutter

4: 檢查 HomeBrew (這個非常方便)

我們在去配置 Flutter 的環(huán)境之前，需要先檢查一下 HomeBrew 是不是最新的! 如果沒有的話就去 HomeBrew官網下載

5: 下載 Flutter SDK

官網SDK下載地址 速度還是挺快的! 當然也可以通過 ?? 去 clone

git clone -b beta https://github.com/flutter/flutter.git

我這里就看到官網下載速度挺快,就自己下載解壓縮,網上也有很多人說上面的 clone 挺費時間. 既然快速學習就不去不必要的采坑 ??

然后提取文件到所需的位置

因為Flutter的SDK中包含了很多命令行工具。我們需要配置環(huán)境變量，所以建議你安裝到你平時放命令行工具程序的地方! 我這里安裝在了根目錄的 opt 下!
/opt/flutter （僅供參考，安裝在哪里看你自己的習慣）

5: 配置環(huán)境變量

因為 Flutter 在運行的時候,需要去官方下載所需要的資源.那么沒有“梯子”的伙伴你會需要鏡像服務器，以下是官方文檔的友情提示。

image

• 來到你對應 Shell 的配置文件進行配置。

• 如果你使用默認的bash那么配置 ~/.bash_profile

• 如果你使用zsh（Mac新系統(tǒng)默認是zsh）那么配置 ~/.zshrc

#Flutter 鏡像配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

#Flutter 配置
export FLUTTER=/opt/flutter/bin
export PATH=$FLUTTER:$PATH

配置完成就執(zhí)行 source ~/.bash_profile

那么接下來!我們可以看看 Flutter 是否配置完成了。Flutter有一個 doctor 檢測指令。專門用于檢測你的Flutter環(huán)境的。

flutter doctor

image

跑了一段時間你可以就會出現??的情況, 在 Android 和 VS code 配置沒有成功

接下來我們去配置各個平臺的 Flutter 的環(huán)境 去解決以下問題

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ? Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
    
[!] Android Studio (version 4.1)
    ? Flutter plugin not installed; this adds Flutter specific functionality.
    ? Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.52.0)
    ? Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! Error: Cooci的iPhone is not connected. Xcode will continue when Cooci的iPhone is connected.
      (code -13)

6: 配置各個平臺環(huán)境

① : 解決 android-licenses 問題

flutter doctor --android-licenses

后面一頓 y

②: Android -> configure -> Plugins 去安裝 Flutter 插件

image

注意現在 暗示4.1.1的版本有bug 就是添加了插件還會報那個錯誤.大家可以降低版本

因為 Android Studio 4.1 的插件位置變了，所以用 flutter doctor 這個命令去檢測時，還是會去原來的位置查找這兩個插件，由此導致無法找到插件。

但是并不影響打包編譯?。?！

2020年12月21更新

關于: Android Studio (version 4.1)； Flutter plugin not installed and Dart plugin not installed

我一個學員提供了一個方案解決 : 原文地址: AndyGF

Android Studio (4.1) 的 flutter 和 dart 插件都裝好了, 用 flutter doctor 命令去檢測, 還是檢測不到這兩個插件, 還是報錯!

原因是 Android Studio (4.1) 的插件位置換了, 而 flutter doctor 這個命令還是會去原來的位置查找這兩個插件,

舊目錄: ~/Library/Application\ Support/AndroidStudio4.1

新目錄: ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins

解決的辦法是軟鏈接一下 :

ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1

?? 非常舒服的解決了! 看著一排的綠色我也就心安了!!! 再次感謝 [AndyGF] (http://www.itdecent.cn/p/58fdbc82ab2c) 提供的的建議, 大家不妨可以去看看他的文章,在簡書上面這一篇文章就有: 800多的瀏覽量 估計你也會遇到! 同時歡迎每一個愿意為iOS生態(tài)加油的各位靚仔,遇到任何問題都可以及時留言 私信交流

2020年12月30日更新

[?] Android toolchain - develop for Android devices
    ? Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, set
      ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

解決方法如下，打開 Android Studio->點擊右下角的Configure->點擊 SDK Manager

找到Android SDK Location，復制上面的地址路徑，/Users/你的用戶名/Library/Android/sdk

然后到終端輸入命令：flutter config --android-sdk /Users/你的用戶名/Library/Android/sdk

再次執(zhí)行:flutter doctor，問題解決！

③ : VSCode 安裝 flutter插件

image

④ : 真機設備報錯

[!] Connected device
    ! Error: Cooci的iPhone is not connected. Xcode will continue when
      Cooci的iPhone is connected. (code -13) 

這個問題只要連上真機就可以解決!

問題解決了大家可以打開經典的Flutter 界面開始玩耍吧!

二、其他方式 下玩Flutter

在iOS 環(huán)境下面需要依賴一些東西

需要通過homebrew安裝用于將Flutter應用程序部署到iOS設備的環(huán)境和工具：

brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods

不同情況下回 遇到很多不同情況，如果不成功可以通過flutter doctor來定位問題

• 1、命令行

# 其中flutterapp為項目名稱，不能用大寫
flutter create flutterapp

cd flutterapp
flutter run 
# 當然如果你連接了真機 - 還可以真機運行

flutter run -d 47662d3bad7fa0da458.....

2、Xcode運行

image

條條大路通羅馬 flutter 還是挺便利的!

干貨地址:喜歡可以一鍵三連