(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工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/18388.html