Flutter基礎篇: Mac端搭建安裝環境

flutter作爲谷歌推出的跨平臺開發語言,是目前主流的跨平臺語言選擇。下面會從0到1的學習和使用這門語言

1.下載開發工具

首先需要下載對應的開發工具:

  1. JDK
  2. Flutter SDK
  3. Android Studio
  4. VSCode(主力代碼開發工具)
  5. Xcode

因爲個人用的macbook作爲開發工具,後續都是mac端的操作記錄,但windows端也是大同小異,可作爲參考。(搭建環境較爲複雜,出問題的點也比較多,遇到問題多百度百度解決問題)

1.jdk安裝地址(官網需要賬戶才能下載,如無賬戶可百度搜索下載):https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2.flutter sdk地址:https://flutter.io/sdk-archive/

3.Android Studio地址:http://www.android-studio.org

4.VSCode地址:https://code.visualstudio.com
編譯器中文化(默認是英文):打開軟件後->點擊左面的拓展圖標->在搜索框輸入chinese->點擊Install下載->重啓VSCode

5.XCode:可在App Store搜索後下載


下載好後進行安裝

1.jdk:直接安裝即可,安裝後進入終端輸入 java -version,如果出現版本號java version "1.8.0_181",就是安裝成功
2.flutter sdk:下載成功後可得到如下文件



3.Android Studio:下載後一路next安裝即可


下面爲flutter配置環境變量
  1. 打開終端工具,使用vim進行配置環境變量,命令如下:
vim ~/.bash_profile
  1. 在打開的文件後發現是空白的,只需按i、I、a、A、o、O、r和R中某個鍵即可。進入編輯模式,增加一行代碼
export PATH=/Users/XXX/Desktop/flutter/bin:$PATH

提示:這行命令你要根據你把flutter文件的位置來進行編寫,寫的是你的路徑,很有可能不跟文章一樣。可以把語句從後刪除到=號位置,之後拖動文件得到具體路徑即可。

輸入完路徑後按下圖退出vim的編輯模式


(注意冒號要用英文標點的冒號,如果用中文冒號會沒效果),另外如果vim編輯器出了故障可以退出終端再次進入,如出現E325: ATTENTION可以選d

  1. 配置文件完成後,使用 source 命令重新加載一下(每次重啓後使用flutter都要配置一下),具體命令如下:
source ~/.bash_profile
  1. 使用命令檢查是否安裝成功,具體命令如下:
flutter -h

出現flutter可用命令提示後,表示安裝成功。


檢查開發環境

上面步驟完成,代表flutter環境已搭建完成,現在我們檢查下開發環境是否可用,在終端輸入如下命令

flutter doctor

顯示結果如下

[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-CN)
[✗] 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.

[!] Xcode - develop for iOS and macOS (Xcode 11.6)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (version 4.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.49.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
 
[!] Connected device                          
    ! No devices available

! Doctor found issues in 5 categories.

可以看到顯示有5處警告(一個❌,四個❗️),那麼首先我們先解決Android前面的❌。(如果有多餘的報錯,可能是有的工具沒有下載完成,請參照上面的鏈接把工具下載完整)

注意:帶❌的就必須安裝,帶❗️的就可以暫時忽略。

解決帶❌的問題

Android Studio安裝flutter
打開軟件後點擊左下角的Configure後選擇Plugins
搜索flutter後點擊Install,安裝好即可



安裝完成後會有創建flutter的選項



如果有提示下載sdk需要一路next下載sdk

之後再次執行flutter doctor 我這裏等了好長時間,報錯會變成下圖樣式
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses

之後根據提示在終端輸入如下代碼,運行過程一路選擇y

flutter doctor --android-licenses

再次運行後就會提示

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)

完成上述過程,安卓❌已解決 ~~~

接下來我們解決剩餘❗️
  1. Xcode報錯
[!] Xcode - develop for iOS and macOS (Xcode 11.6)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods

上面的報錯就是提示沒有安裝cocoapods,按照提示在終端輸入:sudo gem install cocoapods,出現密碼提示輸入開機密碼就開始安裝了。之後就是漫長的等待啦,等安裝完成會出現cocoapods after 35 seconds 32 gems installed,相關的Xcode報錯會變成

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
  1. VS Code報錯
[!] VS Code (version 1.49.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

打開vscode搜索並安裝flutter,安裝flutter時會自動安裝Dart語言



安裝後對應的vscode報錯也會消失

  1. 虛擬機報錯
[!] Connected device
    ! No devices available

這個報錯是提示沒有虛擬機,這裏可以選擇真機調試也可以安裝使用虛擬機,下面是安裝虛擬機教程
打開Android Studio軟件,選擇新建flutter項目


出現這個直接用默認的就可以,點擊Next

選擇flutter在工程的路徑,其他默認即可(Project name是工程名,Project location是工程存儲路徑),點擊Next

直接點擊Finish即可,會等待一小段創建項目(我遇到了卡住的情況,但實際工程已經創建好了,可以直接去打開)

進入項目後在上面的Tools選項裏選擇AVD Manager選項

之後選擇紅框的按鈕新建設備

可以隨便選擇一款手機後點擊Next

這裏需要選擇一個系統版本,因爲目前沒有版本,需要下載一個,下載最新的即可,點擊Download按鈕下載

下載完成後點擊next進到下圖頁面,點擊Finish即可

看到這個頁面,就是添加好啦,可以點擊Actions裏的播放⏯運行起來

運行後就能看到模擬器啦

以上操作全部執行完,再次運行flutter doctor

[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E266, locale
    zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.49.0)
[✓] Connected device (1 available)

• No issues found!

至此,flutter安裝完成!全部對號,縱享絲滑~~~

下面就可以編寫flutter項目代碼啦,可以參照下一篇文章
Flutter基礎篇: helloword

感謝閱讀!~~~ ☺

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章