mac 上配置flutter开发环境

2018-11-08 本文已影响273人曹波波

(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-config

checking 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

mac 上配置flutter开发环境

1）安装Flutter SDK

2）iOS 环境配置

3）Android Studio配置

4）VS code 配置

5）IntelliJ IDEA 配置 Flutter

正文

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

1）安装Flutter SDK

关于flutter doctor

2）iOS 环境配置

3）Android Studio配置

4）VS code 配置

VS code 中创建Flutter 项目

5）IntelliJ IDEA 配置 Flutter

Mac安装Dart的SDK

猜你喜欢

热点阅读