失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Mac上搭建Flutter开发环境(Android模拟器和IOS模拟器开发)

Mac上搭建Flutter开发环境(Android模拟器和IOS模拟器开发)

时间:2018-11-02 00:11:31

相关推荐

Mac上搭建Flutter开发环境(Android模拟器和IOS模拟器开发)

前言

最近公司要求使用跨平台语言开发新的应用,这几天也对比了ReactNative和Flutter,最终决定入坑Flutter,今天刚配置完Flutter的开发环境,Flutter中文网也有相应的安装开发环境的介绍,这里主要是站在一个Android开发者的角度详细的记录在MAC电脑上配置的步骤和遇到的坑;

达到的目的

这篇博客的目的很简单,搭载可运行在Android模拟器和IOS模拟器的环境,看大图:

搭建要求

设备:Mac电脑系统:macOS Majave 10.14.4已经安装好JDK以及环境变量(自行百度安装)

需要开发IOS端应用时,必须使用MAC系统,因为只能在MAC上打ipa安装包

搭建步骤

一、安装Android Studio

1、下载Android Studio

可以到中文社区下载最新版本的Android Studio,有安装版和绿色版可下载;

2、配置Android SDK

可以到中文社区下载最新提供的SDK,然后进入Android Studio进行SDK路径配置;

SDK配置位置:Android Studio ->Preferences…->搜索‘SDK’->找到Android SDK,比如我的配置路径:

3、创建Android模拟器

二、Android Studio下载Flutter插件

我这边已经下载过了,所以没有install按钮,安装完成后,需要重启Android Studio;

三、下载Flutter SDK

1、镜像配置

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像

~ vi ~/.zshrc

在编辑文件中加入

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

2、Flutter SDK可以通过/flutter/flutter/releases下载正式版本,也可以通过/flutter/flutter下clone最新的开发版;

四、配置Flutter SDK

Flutter SDK下载完成后,需要在Android Studio中配置Flutter SDK的路径

五、flutter doctor 诊断

通过flutter doctor指令诊断一下flutter完整环境是否正确

根据提示执行指令

/Users/ailian/sdk/tools/bin/sdkmanager "platforms;android-28" "build-tools;28.0.3"

执行完成后再诊断一下

根据提示执行:

flutter doctor --android-licenses

然后一路y下去,直到本次指令结束

执行完成后flutter doctor一下

通过以上步骤就可以开发Android版本的Flutter应用了,但是如果想要开发IOS版本的,就需要继续以下几个步骤

六、Xcode安装

在App Store中搜索xcode并下载

我这边已经下载过了xcode,所以显示“打开”

七、安装IOS模拟器

还是一样flutter doctor诊断一下

根据提示顺序执行指令:

brew update

brew install --HEAD usbmuxd

brew link usbmuxd

brew install --HEAD libimobiledevice

brew install ideviceinstaller

brew install ios-deploy

brew install cocoapods

pod setup

pod setup我这边执行了多次都失败了,百度了一下解决方案,记录下

pod setup失败的解决方案:

原因:下载速度太慢,下载速度只有几k/s,容易失败;

解决方案:

1、访问/CocoaPods/Specs.git网址 把文件clone下来,默认文件夹名字为Specs-master,修改为master

2、将master文件夹拷贝到~/.cocoapods/repos路径下

八、验证

因为我的电脑安装了Intellij IDEA而且没有配置Flutter插件,所以会有上面的2个错误,不影响;

九、Demo跑起来

1、打开Android Studio 创建一个demo工程

2、打开IOS模拟器

3、开启Android模拟器

4、选择需要运行到哪个模拟器上

看到上面有两个模拟器可以选择,一个是Android的一个是Ios的说明我们上面的安装步骤已经完成,选择模拟器运行即可,我两个分别运行了:

结束

OK,到此为止,Mac电脑上Flutter开发环境完成配置,而且同时指出Android版和IOS版模拟器开发;

如果觉得《Mac上搭建Flutter开发环境(Android模拟器和IOS模拟器开发)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。