欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

mac 上配置flutter开发环境

发表日期:2018-11 文章编辑:小灯 浏览次数:4010

(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://dengtar.com/18388.html
相关APP开发
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.