mac 上配置flutter开发环境

1.前言#

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
Flutter 是为了跨平台而生的,所以为了验证在iOS和Android 的运行情况,必须先在mac 上配置好 iOS 的开发环境 Xcode 和 Android 的开发环境 Android Studio。

2.安装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 dart-sdk下载失败的情况

Downloading Dart SDK from Flutter engine 4e54bc93ca9aaf2156fb06266c9fe509e8599a5f...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:--  0:05:00 --:--:--     0
curl: (56) Proxy CONNECT aborted due to timeout

Failed to retrieve the Dart SDK from: https://mirrors.sjtug.sjtu.edu.cn/flutter_infra/flutter/4e54bc93ca9aaf2156fb06266c9fe509e8599a5f/dart-sdk-darwin-x64.zip
If you're located in China, please see this page:
  https://flutter.io/community/china

flutter是基于Dart语言开发的,所以我们需要额外安装配置Dart语言的开发环境。
本机是使用brew(Homebrew)安装Dart,如果你的mac未安装这个软件管理插件,请先安装Homebrew。

3.安装Dart SDK

本机是按照官网的提示安装的
首先需要安装Homebrew

ACF2F5A8-0743-443C-94B4-5635F5B9758A.png

将命令粘到macOS终端提示符中:


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

执行此条命令即可。

dart的版本分为稳定版和dev通道版本,
稳定的渠道:稳定的发布,每6周更新一次; 目前2.4.1。
开发频道:预发布,通常每周更新1次; 目前2.5.0-dev.2.1。
稳定版本运行:

 brew tap dart-lang/dart
 brew install dart

要安装dev通道版本,请使用--devel:


brew install dart -- --devel

dart 安装成功之后再次执行:

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 SDK的安装。

4.关于flutter doctor

flutter doctor 是 flutter 对mac本机的环境配置诊断脚本,脚本结果会直接放出 flutter 环境有哪些需要继续配置的。按照提示执行脚本即可。
下面是我的flutter 诊断结果

[!] Android Studio (version 3.0)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2018.3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.37.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (1 available)

5.Android Studio配置

Android Studio的配置非常简单:

打开Android Studio -> Preference > Plugins
在搜索框中搜索 Flutter
本地没有, 就联网查找,搜索到Flutter, 点击安装即可
Dart环境他自动会安装好

如果Flutter安装失败,请不要灰心,这主要是网络问题,调整配置或者开VPN即可。(能使用Android Studio,网络问题肯定已经得到了很好的解决)

6.VS code 配置

VS code的Flutter配置也很简单:

打开VS code -> Extentions管理
在搜索框中搜索 Flutter
搜索到Flutter, 点击安装即可
Dart环境也是自动会安装好

83F76F04-1A7D-4C1A-81E4-8D007DF970BF.png

配置完成后,按照提示,重启VS code 就生效了。此时,可以按照提示,去执行Flutter doctor来检查 VS code 的配置情况。

7.IntelliJ IDEA 配置 Flutter

打开IntelliJ IDEA -> Preference > Plugins
在搜索框中搜索 Flutter
搜索到Flutter, 点击安装即可
Dart环境他自动会安装好

25687304-933F-4CC4-B69A-3A02DC37BC4C.png

这样,IntelliJ IDEA 的 Flutter 开发环境就配置好了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (ios,Android,Xcode,Android Studio,VScode,IDEA) 1)安装Flutte...
    曹波波阅读 24,020评论 13 30
  • Flutter简介 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发...
    moxuyou阅读 8,526评论 0 6
  • 这几天精神很不错,饭都多吃了。 画画不是件速成事,慢慢的好起来了。 中午教邻居用手机,技多不压身啊。 下午虽然忘记...
    逆风追梦人阅读 695评论 0 0
  • 贫穷大学生十年寒窗苦读,满以为会功成名就,升职加薪,当上总经理,出任CEO,迎娶白富美,走上人生巅峰。谁知道落水救...
    自强的星阅读 942评论 0 0
  • 哈喽,各位亲爱的小伙伴们大家晚上好,今天刚刚回到家中,然后今天想换一种方式来更新简书,我是第一次尝试语音写作,本来...
    UMe米立阅读 3,793评论 1 7