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-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2、Flutter SDK可以通过https://github.com/flutter/flutter/releases下载正式版本,也可以通过https://github.com/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、访问https://github.com/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版模拟器开发;