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

1）安裝Flutter SDK

2）iOS 環(huán)境配置

3）Android Studio配置

4）VS code 配置

5）IntelliJ IDEA 配置 Flutter

正文

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開源的。

這里我就詳細(xì)介紹一下 Flutter 在mac 上的環(huán)境部署以及開發(fā)準(zhǔn)備。Flutter 是為了跨平臺而生的，所以為了驗證在iOS和Android 的運(yùn)行情況，必須先在mac 上配置好 iOS 的開發(fā)環(huán)境 Xcode 和 Android 的開發(fā)環(huán)境 Android Studio。這里我就不在展開寫 Xcode 和 Android Studio 的安裝配置過程了，這算是開發(fā)Flutter 的前提條件吧。另外，我個人更喜歡IntelliJ IDEA 的Flutter 開發(fā)環(huán)境，所以，也將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. 導(dǎo)出到Flutter保存路徑 export PATH=`pwd`/flutter/bin:$PATH 

由于國內(nèi)網(wǎng)絡(luò)限制我們可以通過修改鏡像地址來解決, 好在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 

關(guān)于flutter doctor

flutter doctor 是 flutter 對mac本機(jī)的環(huán)境配置診斷腳本，腳本結(jié)果會直接放出 flutter 環(huán)境有哪些需要繼續(xù)配置的。按照提示執(zhí)行腳本即可。

下面是我的flutter 診斷結(jié)果

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 環(huán)境配置

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

按照 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 是調(diào)用iOS模擬器的一個第三方庫，flutter 使用這個庫調(diào)用iOS模擬器運(yùn)行project，十分重要。

這里依次執(zhí)行安裝腳本即可。

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 

仔細(xì)看最后一行，我們會發(fā)現(xiàn)異常所在Requested 'libusbmuxd >= 1.1.0' but version of libusbmuxd is 1.0.10，很顯然是由于系統(tǒng)要求的 libusbmuxd 版本和所要安裝的版本不一致。

經(jīng)過一番搜索終于找到了問題所在:

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,然后再執(zhí)行 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

最終，再次執(zhí)行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
• 本地沒有, 就聯(lián)網(wǎng)查找,搜索到Flutter, 點(diǎn)擊安裝即可
• Dart環(huán)境他自動會安裝好

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

4）VS code 配置

VS code的Flutter配置也很簡單：

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

• Dart環(huán)境也是自動會安裝好

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

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

VS code 中創(chuàng)建Flutter 項目

然后就可以在VS code 中創(chuàng)建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

• 根據(jù)提示，選擇項目創(chuàng)建位置，項目就創(chuàng)建完成了

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

5）IntelliJ IDEA 配置 Flutter

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

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

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

Mac安裝Dart的SDK

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

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

1、直接打開終端 依次執(zhí)行：

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

2、查看相關(guān)信息：

$ brew info dart 

執(zhí)行結(jié)果如下：

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創(chuàng)建 Dart項目時需要Dart SDK的path

其中，/usr/local/opt/dart/libexec 就是Dart的安裝環(huán)境。

然后就可以創(chuàng)建 Flutter 項目了。

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