mac 上配置flutter开发环境

(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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容