(ios,Android,Xcode,Android Studio,VScode,IDEA)

1）安裝Flutter SDK

2）iOS 環境配置

3）Android Studio配置

4）VS code 配置

5）IntelliJ IDEA 配置 Flutter

正文

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，并且Flutter是完全免費、開源的。

這里我就詳細介紹一下 Flutter 在mac 上的環境部署以及開發準備。Flutter 是為了跨平臺而生的，所以為了驗證在iOS和Android 的運行情況，必須先在mac 上配置好 iOS 的開發環境 Xcode 和 Android 的開發環境 Android Studio。這里我就不在展開寫 Xcode 和 Android Studio 的安裝配置過程了，這算是開發Flutter 的前提條件吧。另外，我個人更喜歡IntelliJ IDEA 的Flutter 開發環境，所以，也將IDEA 的配置Flutter方法放在最后。

所以本文流程就是先Flutter SDK
然后 Xcode 和 Android Studio
最后是IDE：VS code 和IntelliJ IDEA

1）安裝Flutter SDK

安裝方法：
這里使用的是git安裝

//1.終端中輸入以下指令克隆項目 git clone -b beta https://github.com/flutter/flutter.git //2. 導出到Flutter保存路徑 export PATH=`pwd`/flutter/bin:$PATH 

由于國內網絡限制我們可以通過修改鏡像地址來解決, 好在Google良心,專門給我們大陸提供了方案, 終端中一次輸入以下命令即可解決。

export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn git clone -b dev https://github.com/flutter/flutter.git export PATH="$PWD/flutter/bin:$PATH" cd ./flutter flutter doctor 

關于flutter doctor

flutter doctor 是 flutter 對mac本機的環境配置診斷腳本，腳本結果會直接放出 flutter 環境有哪些需要繼續配置的。按照提示執行腳本即可。

下面是我的flutter 診斷結果

caobo:flutter caobo56$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [?] Flutter (Channel dev, v0.10.2, on Mac OS X 10.14 18A391, locale zh-Hans-CN) [?] Android toolchain - develop for Android devices (Android SDK 28.0.3) [!] iOS toolchain - develop for iOS devices (Xcode 10.1) ? libimobiledevice and ideviceinstaller are not installed. To install, run: brew install --HEAD libimobiledevice brew install ideviceinstaller [?] Android Studio (version 3.2) [?] VS Code (version 1.28.2) [!] Connected device ! No devices available 

2）iOS 環境配置

正常情況下，如果沒有安裝Xcode，一般會先讓你安裝Xcode，并且一般要求最新版，但我的已經裝了，此步略

按照 flutter doctor 提示： iOS toolchain 配置有問題，并且給出了解決方案：

[!] iOS toolchain - develop for iOS devices (Xcode 10.1) ? libimobiledevice and ideviceinstaller are not installed. To install, run: brew install --HEAD libimobiledevice brew install ideviceinstaller 

這里需要說明的是，libimobiledevice 是調用iOS模擬器的一個第三方庫，flutter 使用這個庫調用iOS模擬器運行project，十分重要。

這里依次執行安裝腳本即可。

brew install --HEAD libimobiledevice brew install ideviceinstaller 

我在安裝的過程中，libimobiledevice 的安裝遇到了一個問題：

brew install --HEAD libimobiledevice==> Cloning [https://git.libimobiledevice.org/libimobiledevice.git](https://git.libimobiledevice.org/libimobiledevice.git) Updating /Users/rjoiner/Library/Caches/Homebrew/libimobiledevice--git==> Checking out branch master Already on 'master' Your branch is up to date with 'origin/master'. HEAD is now at b34e343 tools: Remove length check on device UDID arguments to support newer devices==> ./autogen.sh Last 15 lines from /Users/rjoiner/Library/Logs/Homebrew/libimobiledevice/01.autogen.sh: checking dynamic linker characteristics... darwin16.7.0 dyld checking how to hardcode library paths into programs... immediate checking for pkg-config... /usr/local/opt/pkg-config/bin/pkg-configchecking pkg-config is at least version 0.9.0... yes checking for libusbmuxd >= 1.1.0... no configure: error: Package requirements (libusbmuxd >= 1.1.0) were not met:Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10 

仔細看最后一行，我們會發現異常所在Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10，很顯然是由于系統要求的 libusbmuxd 版本和所要安裝的版本不一致。

經過一番搜索終于找到了問題所在:

A recent change to libimobiledevice bumped the constraint on libusbmuxd to >= version 1.1.0. The current usbmuxd homebrew package is version 1.0.10.
As a result, homebrew --HEAD installs of libimobiledevice no longer build without a --HEAD install of usbmuxd.
Until the usbmuxd homebrew formula is updated, a workaround is to install it at HEAD:

總之就是libimobiledevice更新了，我們可以通過下面的方式安裝libimobiledevice:

brew update brew uninstall --ignore-dependencies libimobiledevice brew uninstall --ignore-dependencies usbmuxd brew install --HEAD usbmuxd brew unlink usbmuxd brew link usbmuxd brew install --HEAD libimobiledevice 

其中，usbmuxd如果安裝有問題，可以嘗試直接 unlink/link usbmuxd,然后再執行 brew install --HEAD libimobiledevice 即可。我的就是這樣解決了。

caobo:flutter caobo56$ brew install --HEAD libimobiledevice Updating Homebrew... ==> Auto-updated Homebrew! Updated 1 tap (homebrew/cask). No changes to formulae.==> Cloning https://git.libimobiledevice.org/libimobiledevice.git Updating /Users/caobo/Library/Caches/Homebrew/libimobiledevice--git ==> Checking out branch master Already on 'master' Your branch is up to date with 'origin/master'. HEAD is now at 92c5462 idevicebackup2: Fix scan_directory() for platforms not having d_type in struct dirent ==> ./autogen.sh ==> ./configure --disable-silent-rules --prefix=/usr/local/Cellar/libimobiledevice/HEAD-92c5462_3 --without-cython - ==> make install ?/usr/local/Cellar/libimobiledevice/HEAD-92c5462_3: 67 files, 1MB, built in 58 seconds

最終，再次執行flutter doctor

caobo:flutter caobo56$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [?] Flutter (Channel dev, v0.10.2, on Mac OS X 10.14 18A391, locale zh-Hans-CN) [?] Android toolchain - develop for Android devices (Android SDK 28.0.3) [?] iOS toolchain - develop for iOS devices (Xcode 10.1) [?] Android Studio (version 3.2) [?] VS Code (version 1.28.2) [?] Connected device (2 available)? No issues found! 

3）Android Studio配置

Android Studio的配置非常簡單：

• 打開Android Studio -> Preference > Plugins
• 在搜索框中搜索 Flutter
• 本地沒有, 就聯網查找,搜索到Flutter, 點擊安裝即可
• Dart環境他自動會安裝好

如果Flutter安裝失敗，請不要灰心，這主要是網絡問題，調整配置或者開VPN即可。（能使用Android Studio，網絡問題肯定已經得到了很好的解決）

4）VS code 配置

VS code的Flutter配置也很簡單：

• 打開VS code -> Extentions管理
• 在搜索框中搜索 Flutter
• 搜索到Flutter, 點擊安裝即可

• Dart環境也是自動會安裝好

  
  屏幕快照 2018-11-09 上午7.29.34.png

配置完成后，按照提示，重啟VS code 就生效了。此時，可以按照提示，去執行Flutter doctor來檢查 VS code 的配置情況。

VS code 中創建Flutter 項目

然后就可以在VS code 中創建Flutter 項目了。

• 打開VS code -> View -> Command Palette...

  
  屏幕快照 2018-11-09 上午7.38.30

• 在命令行框中輸入 Flutter，然后找到Flutter: new project,然后Enter

  
  屏幕快照 2018-11-09 上午7.38.42

• 然后輸入 project Name

  
  屏幕快照 2018-11-09 上午7.39.09

• 根據提示，選擇項目創建位置，項目就創建完成了

  
  屏幕快照 2018-11-09 上午7.39.38
  屏幕快照 2018-11-09 上午7.40.08

5）IntelliJ IDEA 配置 Flutter

• 打開IntelliJ IDEA -> Preference > Plugins
• 在搜索框中搜索 Flutter
• 搜索到Flutter, 點擊安裝即可
• Dart環境他自動會安裝好

屏幕快照 2018-11-09 上午7.47.46

這樣，IntelliJ IDEA 的 Flutter 開發環境就配置好了，但是現在我們還不能直接在IDEA 中創建 Flutter 項目，因為需要需要額外安裝配置Dart語言的開發環境。

Mac安裝Dart的SDK

需要注意的是，flutter是基于Dart語言開發的，所以我們需要額外安裝配置Dart語言的開發環境。

本機是使用brew(Homebrew)安裝Dart，如果你的mac未安裝這個軟件管理插件，請先安裝Homebrew。

1、直接打開終端 依次執行：

$ brew tap dart-lang/dart $ brew install dart 

2、查看相關信息：

$ brew info dart 

執行結果如下：

caobo:flutter caobo56$ brew info dart dart-lang/dart/dart: stable 2.0.0, devel 2.1.0-dev.9.3 The Dart SDK https://www.dartlang.org/ /usr/local/Cellar/dart/2.0.0 (1,220 files, 374.3MB) * Built from source on 2018-11-08 at 19:26:05 From: https://github.com/dart-lang/homebrew-dart/blob/master/dart.rb ==> Options --devel Install development version 2.1.0-dev.9.3 ==> Caveats Please note the path to the Dart SDK: /usr/local/opt/dart/libexec

安裝完成后，注意安裝的路徑，在使用IntelliJ IDEA創建 Dart項目時需要Dart SDK的path

其中，/usr/local/opt/dart/libexec 就是Dart的安裝環境。

然后就可以創建 Flutter 項目了。

屏幕快照 2018-11-09 上午7.52.20.png 屏幕快照 2018-11-09 上午7.54.07.png 屏幕快照 2018-11-09 上午7.54.26.png
本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://m.junxiaosheng.cn/18388.html