失眠网 > Flutter开发环境在Mac上的搭建(iOS和Android图文详细过程)

Flutter开发环境在Mac上的搭建(iOS和Android图文详细过程)

时间：2023-12-12 11:54:20

文章目录

系统要求本机环境设置Flutter镜像获取Flutter SDK安装Android Studio及插件安装Android Studio配置Android Studio安装SDK并配置环境变量配置SDK和SDK平台下载Flutter和Dart插件检查Flutter环境创建一个简单的Flutter项目iOS开发环境设置启动iOS模拟器运行创建的Flutter项目使用命令行工具打开iOS模拟器运行FlutterAndroid Studio中使用iOS模拟器运行Flutter 使用Xcode将Flutter在iOS真机上运行 Android开发环境设置设置Android模拟机启动Android模拟器在Android模拟器中运行创建的Flutter项目将Flutter安装到Android真机上总结

系统要求

在Mac上要安装并运行Flutter要满足以下最低要求:

操作系统: macOS (64-bit)磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.Flutter安装依赖以下命令行工具：bash curl git 2.x mkdir rm unzip which

本机环境

Mac Pro配置：

手机配置：

设置Flutter镜像

因为在国内访问Flutter可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，需要将镜像地址添加到环境变量中。

环境变量路径：

/Users/你的用户名/.bash_profile

Flutter镜像地址：https://flutter.dev/community/china

需要注意的是，Flutter镜像地址会有更新，需要随时修改环境变量。

在环境变量路径下，使用vim命令，添加Flutter镜像地址到.bash_profile文件中。

# 添加Flutter镜像地址export PUB_HOSTED_URL=https://pub.flutter-export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-

获取Flutter SDK

点击Flutter官网下载最新的安装包，这里选用的是macOS系统1.20.2稳定版(flutter_macos_1.20.2-stable.zip)。解压缩到安装目录(这里我在用户becomebamboo下新建了development目录)。

cd /Users/becomebamboo/developmentunzip /Users/becomebamboo/Downloads/flutter_macos_1.20.2-stable.zip

将Flutter添加到Path(类似添加jdk)，此时修改后的.bash_profile文件如下：

# 添加Flutter镜像地址export PUB_HOSTED_URL=https://pub.flutter-export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-# 将Flutter添加到PATHexport PATH=/Users/becomebamboo/development/flutter/bin:$PATH

安装Android Studio及插件

安装Android Studio

Android Studio是谷歌公司推出的针Flutter的一款IDE，目前主流的Flutter IDE为Android Studio、IDEA和Visual Studio Code，其中IDEA和Android Studio是一样的内核，可以通过Jetbrains Toolbox更新，这里推荐使用免费的Android Studio，下载地址为：

国外：/studio国内：https://developer./studio

配置Android Studio

安装SDK并配置环境变量

安装完成后启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具。

SDK下载完成后继续配置.bash_profile文件(最后一次修改环境变量)：

#Android SDK路径export ANDROID_HOME=/Users/becomebamboo/Library/Android/sdk#Android模拟器路径export PATH=${PATH}:${ANDROID_HOME}/emulator#Android工具路径export PATH=${PATH}:${ANDROID_HOME}/tools#Android平台工具路径export PATH=${PATH}:${ANDROID_HOME}/platform-tools#Flutter镜像export PUB_HOSTED_URL=https://pub.flutter-export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-#Flutter环境变量export PATH=/Users/becomebamboo/development/flutter/bin:$PATH

配置SDK和SDK平台

点击Preferences - System Settings配置SDK：这里注意根据要调试的Android手机版本下载对应的SDK Platform，同时填写了下载的SDK路径。由于我的华为手机安卓版本是10.1.0.152，所以这里SDK Platform选择Android 10.0下载。

下载Flutter和Dart插件

点击Preferences -Plugins配置下载Flutter和Dart插件

检查Flutter环境

打开终端输入flutter doctor检查环境

可以看到Android licenses没授权，按照提示执行

flutter doctor --android-licienses

此时可以看到Android开发环境配置完成

此时还剩Xcode和Cocopods没有安装，下面安装并配置Xcode：

在App Store下载安装Xcode，注意Xcode文件超过20G，需要预留足够的安装空间。安装完成后配置Xcode命令行工具以使用新装的Xcode版本，如果是beta版本，注意是Xcode-beta.app，路径不同。

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

Xcode配置完成后即可使用Xcode在iOS设备或模拟器上运行Flutter。

继续按照提示安装CocoPods：

sudo gem install cocoapods

安装完成后继续执行flutter doctor检查环境：

此刻Flutter开发环境已经配置完成，因为使用Android Studio作为IDE，所以IDEA和VS Code的Flutter插件没有安装。

创建一个简单的Flutter项目

使用命令行工具创建一个Flutter项目，其中ios_app是自定义的App名

flutter create ios_app

Flutter项目创建完成

Flutter项目创建完成后有如下文件：

其中：

ios：iOS宿主android：Android宿主lib：包含main.dart等代码文件pubspec.yaml：项目配置文件

iOS开发环境设置

启动iOS模拟器

2种启动方法：

通过Xcode启动通过命令行，在终端输入命令打开一个iOS模拟器

open -a Simulator

启动后的iOS模拟器如下，选择对应的版本和机型即可。

运行创建的Flutter项目

使用命令行工具打开iOS模拟器运行Flutter

进入创建的ios_app路径，输入flutter run，按照提示选择iOS模拟器

运行效果：

启动后有些工具可以使用：

其中：

r热加载R热重启q退出命令行工具

Android Studio中使用iOS模拟器运行Flutter

通过Android Studio打开创建的项目，选择iOS模拟器，点击debug按钮执行，效果同上

使用Xcode将Flutter在iOS真机上运行

Mac Pro连上IPhone并关闭锁屏，使用Xcode打开创建ios_app下面的Ios文件夹，连接成功会在最上面工具栏显示手机名称，配置Bundle并选择开发环境

接着配置签名：

由于iOS手机版本是13.6，需要设置手机允许安装未知来源的APP，点击设置-通用-设备管理-企业级应用，选择信任开发者(有人说手机连上选择信任即可，但是我手机不行)

接着在Xcode点击运行按钮

Build成功后Xcode会把App安装到iPhone上并自动运行

Android开发环境设置

设置Android模拟机

点击：

选择Create Virtual Device

由于华为手机不在列表里，根据手机分辨率和尺寸自定义虚拟设备。

接下来给Android模拟器配置硬件加速，勾选HAXM

启动Android模拟器

2种启动方法：

Android Studio中启动

命令行启动：注意huawei是刚才定义的avd(Android Viutual Device)名称

emulator -avd huawei

在Android模拟器中运行创建的Flutter项目

启动模拟器后可能卡在如下画面：

此时修改android路径下的build.gradle文件，把谷歌源改为阿里云

buildscript {ext.kotlin_version = '1.3.50'repositories {// google()// jcenter()maven {url '/repository/google' }maven {url '/repository/jcenter' }maven {url '/nexus/content/groups/public' }}dependencies {classpath 'com.android.tools.build:gradle:3.5.0'classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"}}allprojects {repositories {// google()// jcenter()maven {url '/repository/google' }maven {url '/repository/jcenter' }maven {url '/nexus/content/groups/public' }}}rootProject.buildDir = '../build'subprojects {project.buildDir = "${rootProject.buildDir}/${project.name}"}subprojects {project.evaluationDependsOn(':app')}task clean(type: Delete) {delete rootProject.buildDir}

修改后重新启动Android模拟器，成功后画面如下：