美文网首页
mac安装Flutter初体验(最新)

mac安装Flutter初体验(最新)

作者: Yi小祥 | 来源:发表于2020-09-23 19:32 被阅读0次

最近捣腾了一下Flutter,故写下这篇文章给大家分享一下如何在mac下安装Flutter.

安装环境

  • Android Studio 4.0.1
  • Xcode 11.7
  • flutter 1.20.4

准备工作

0x00 安装 Android Studio

Android Studio是Google官方提供的Android应用IDE,官网下载链接:戳这里,当前最新版本为4.0.1。

运行Android Studio,按照向导提示一步一步走下去:

  1. 选择Do not import settings.


    Do not import settings
  2. 弹框选择cancel.


    选择cancel
  3. 弹出点击Next.


    Next
  4. install Type选择Standard,点击Next.


    选择Standard
  5. 静静等待组件下载并自动安装完成.

0x01 安装Xcode

如果您是苹果开发者可以跳过此步。Xcode直接在App Store安装即可,安装完成打开Xcode自动安装配置组件,完成后输入命令open -a Simulator打开 iOS 模拟器,至此Xcode安装完毕。

0x02 安装Flutter

Flutter官网下载当前最新稳定版本(1.20.4),如果官网无法打开,可以去Flutter.cn下载:

Flutter下载

下载完成后放到你想要的目录解压,笔者放到了~/Flutter目录下,zip包解压后flutter的bin目录的路径为:~/Flutter/flutter/bin

对于macOS系统,我们可以编辑~/.bash_profile文件,将flutter命令添加到环境变量PATH中,添加如下代码:

export PATH=~/Flutter/flutter/bin:$PATH

添加完成后重启命令行工具,我们来试试输入flutter --version命令查看当前版本,配置正确的话,可以得到当前flutter的版本:

admin@admindeMac ~ % flutter --version
Flutter 1.20.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision fba99f6cf9 (6 days ago) • 2020-09-14 15:32:52 -0700
Engine • revision d1bc06f032
Tools • Dart 2.9.2

至此我们初步完成了flutter的基本环境安装,由于Flutter源站在国内可能不太稳定,因此谷歌中国开发者社区(GDG)专门搭建了临时镜像,使得我们的 Flutter 命令行工具可以到该镜像站点下载所需资源。编辑~/.bash_profile 文件,添加如下代码配置镜像站点环境变量:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

如果后续读者发现镜像站点无法访问,可以去Flutter社区获取最新的中国可用镜像站点,更新~/.bash_profile文件即可。

至此,我们已经把几个比较重要的工具安装完成,接下来可以使用flutter doctor命令来检查一下flutter的环境是否完全搭建好:

flutter doctor
可以看到[!]标注的是警告,我们可以按照提示运行flutter doctor --android-licenses解决。而[x]标注的是错误,必须解决,这里提示我们没有安装Flutter plugin和Dart plugin。我们打开Android Studio->Prefenrencs->Plugin,在Marketplace栏搜索flutter,安装flutter plugin:
安装flutter plugin

安装完成后重新运行flutter doctor命令,可以看到已经没有错误了:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.6 19G2021, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 11.7)
    ! CocoaPods 1.7.5 out of date (1.8.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to
        your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade:
        sudo gem install cocoapods
[✓] Android Studio (version 4.0)
[!] Connected device
    ! No devices available

运行Hellow word

在flutter/examples目录下,有一些flutter的实例项目,用Android Studio打开hello_world目录,首次打开hellow_word项目,会提示'Pub get'has not been run:


'Pub get'has not been run

我们点击右侧的'Get dependencies',Android Studio会自动运行flutter pub get:

flutter pub get
Running "flutter pub get" in hellow_word...                              1.7s
Process finished with exit code 0

0x00 iOS模拟器运行

在顶部设备列表选择'Open iOS Simulator'打开iOS模拟器,选择指定的iOS模拟器后直接Run即可。


iOS 模拟器

0x01 Android模拟器运行

我们需要先添加一个安卓模拟器,在工具栏右侧点击AVD Manager按钮添加安卓模拟器:


image.png

详细添加过程不再赘述,这里我创建了一个Pixel3 API 27的模拟器,选择之后开始Run。

遇到的问题

如果你可以顺利的编译并运行到安卓模拟器上,可以跳过此段内容。
在编译运行过程,我遇到了一个错误:

Exception in thread "main" java.util.zip.ZipException: error in opening zip file

解决方法:
在根目录使用快捷键Shift+Command+.显示隐藏文件和目录,删除.gradle目录,重新编译运行项目,这个时候会重新创建.gradle目录并下载相应文件,耐心等待即可。

总结

本文主要介绍了flutter的环境搭建过程,并在iOS和Android模拟上成功运行hellow_word项目。希望本文可以给你带来帮助。

注意:随着时间的推移,相关开发环境可能会升级更新,文中的方法不一定适用。

相关文章

  • Flutter环境搭建

    谷歌Flutter官方网站Flutter中文网Flutter社区中文资源Flutter初体验(一)——Mac 安装...

  • mac安装Flutter初体验(最新)

    最近捣腾了一下Flutter,故写下这篇文章给大家分享一下如何在mac下安装Flutter. 安装环境Androi...

  • Mac安装flutter

    Mac安装flutter 1.去flutter官网下载其最新可用的安装包 2.解压安装包到你想安装的目录 cd~/...

  • Mac 安装flutter初体验

    Flutter因为是新出的框架,所以对系统还是有一定的要求的。 MacOS(64-bit) 磁盘空间:大于700M...

  • Flutter安装

    Flutter安装 一、安装 从GitHub上下载flutter,下载地址:MAC版本Flutter[https:...

  • Mac系统下Flutter的安装

    mac系统安装flutter分三步: 安装flutter sdk flutter环境变量配置 建立flutter应...

  • Flutter - 卡在 Running "flutter pu

    Mac端Flutter的环境配置看这一篇就够了Mac上安装配置Flutter Mac OS Flutter环境配置...

  • MAC Flutter 安装流程

    MAC Flutter 安装流程 flutter 中文网的安装流程:https://flutterchina.cl...

  • Flutter Mac开发环境搭建

    mac系统 安装flutter 分三步:安装flutter sdkflutter环境变量配置 去Flutter官网...

  • Mac 下 Flutter 的安装与配置

    Mac 下 Flutter 的安装与配置 Homebrew 安装与更新 Flutter 的安装与配置 Homebr...

网友评论

      本文标题:mac安装Flutter初体验(最新)

      本文链接:https://www.haomeiwen.com/subject/qqxryktx.html