MacOS上配置Flutter环境(Android+iOS)

MacOS上配置Flutter环境(Android+iOS)

安装之前,建议先全文阅读一遍后再动手操作,建议参考着官方文档进行安装 中文社区文档

1. 下载软件和SDK

以上请提前下载好,软件直接安装好

2. 配置Flutter

我放置sdk的目录是/Users/bzqll/software/flutter/sdk/

解压SDK压缩包,得到flutter文件夹,放置到~/flutter/sdk/ 目录下

接下来配置全局环境变量,修改.bash_profile,如果使用的是Oh-My-Zsh,则修改.zshrc,在文件的结尾加上下面这句:

# Setting PATH for flutter
export PATH="/Users/bzqll/software/flutter/sdk/flutter/bin:$PATH"

source ~/.bash_profile,使用Oh-My-Zsh则执行source ~/.zshrc使其生效

执行 flutter --version

输出版本则配置完成

3. 配置iOS开发环境

需要先装好Xcode,然后通过在命令行中运行以下命令来配置

 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

当你安装了最新版本的 Xcode,大部分情况下,上面的路径都是一样的。但如果你安装了不同版本的 Xcode,你可能要更改一下上述命令中的路径。

安装cocoapods

sudo gem install cocoapods
pod setup

最后,运行一次 Xocde 或者通过输入命令 sudo xcodebuild -license 来确保已经同意 Xcode 的许可协议,一路按Y,最后需要输入一次 agree

4. 配置Android开发环境

网上搜到很多自行安装SDK的,试了通过brew cask install android-sdk,但是flutter依旧不识别

所以直接通过Android Studio 来安装

打开Android Studio ,找到Preferences -> Appearance & Behavior -> System Settings -> Android SDK

我勾选了这么多进行下载

SDK Platform

SDK Tool

下载安装SDK完成后,需要同意一下协议

flutter doctor --android-licenses

一路y,直到结束

5. 安装测试

安装完成后,执行命令 flutter doctor

➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14.6 18G95, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
[✓] Android Studio (version 3.5)
[✓] IntelliJ IDEA Ultimate Edition (version 2019.2.2)
[✓] VS Code (version 1.38.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

这里出了连接设备其他都好了,至于开发工具IntelliJ IDEA、Android Studio、VS Code 三选一即可,为了方便安装Android的SDK,我下载了Android Studio,其他两个IDE是我原本就安装了。注意,使用任意一个IDE都需要安装Flutter和Dart的插件。

下面是测试在iOS运行APP,Android的请参考官网文档,不再列出

-打开一个模拟器

open -a Simulator
  • 运行Demo测试

通过运行以下命令来创建一个新的 Flutter 应用:

flutter create my_app

上述命令创建了一个 my_app 的目录,包含了 Flutter 初始的应用模版,切换路径到这个目录内:

cd my_app
  • 启动应用

确保模拟器已经处于运行状态,输入以下命令来启动

 flutter run

如果不错意外的话就可以看到运行的APP被打开了

# Flutter 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×