文章目录

  • 系统要求
  • 本机环境
  • 设置Flutter镜像
  • 获取Flutter SDK
  • 安装Android Studio及插件
  • 安装Android Studio
  • 配置Android Studio
  • 安装SDK并配置环境变量
  • 配置SDK和SDK平台
  • 下载Flutter和Dart插件
  • 检查Flutter环境
  • 创建一个简单的Flutter项目
  • iOS开发环境设置
  • 启动iOS模拟器
  • 运行创建的Flutter项目
  • 使用命令行工具打开iOS模拟器运行Flutter
  • Android 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配置:

型号

系统版本

MacBook Pro (15-inch, 2017)

10.15.6

手机配置:

手机

系统版本

iPhone 7 Plus

13.6.1

华为Mate 40 Pro

10.1.0.152


设置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-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn



获取Flutter SDK

  1. 点击Flutter官网下载最新的安装包,这里选用的是macOS系统1.20.2稳定版(flutter_macos_1.20.2-stable.zip)。
  2. 解压缩到安装目录(这里我在用户becomebamboo下新建了development目录)。
cd /Users/becomebamboo/development
unzip /Users/becomebamboo/Downloads/flutter_macos_1.20.2-stable.zip
  1. 将Flutter添加到Path(类似添加jdk),此时修改后的.bash_profile文件如下:
# 添加Flutter镜像地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# 将Flutter添加到PATH
export 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,下载地址为:


配置Android Studio

安装SDK并配置环境变量

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

flutter ios开发证书 flutter ios开发一定要mac吗_android

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-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

#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 ios开发证书 flutter ios开发一定要mac吗_app_02



下载Flutter和Dart插件

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

flutter ios开发证书 flutter ios开发一定要mac吗_android_03



检查Flutter环境

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

flutter ios开发证书 flutter ios开发一定要mac吗_android_04

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

flutter doctor --android-licienses

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

flutter ios开发证书 flutter ios开发一定要mac吗_app_05

此时还剩XcodeCocopods没有安装,下面安装并配置Xcode:

  1. 在App Store下载安装Xcode,注意Xcode文件超过20G,需要预留足够的安装空间。
  2. 安装完成后配置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 ios开发证书 flutter ios开发一定要mac吗_ios_06


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


创建一个简单的Flutter项目

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

flutter create ios_app

Flutter项目创建完成

flutter ios开发证书 flutter ios开发一定要mac吗_flutter ios开发证书_07

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

flutter ios开发证书 flutter ios开发一定要mac吗_android_08


其中:

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


iOS开发环境设置

启动iOS模拟器

2种启动方法:

  • 通过Xcode启动
  • 通过命令行,在终端输入命令打开一个iOS模拟器
open -a Simulator

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

flutter ios开发证书 flutter ios开发一定要mac吗_ios_09



运行创建的Flutter项目

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

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

flutter ios开发证书 flutter ios开发一定要mac吗_flutter ios开发证书_10


运行效果:

flutter ios开发证书 flutter ios开发一定要mac吗_android_11

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

flutter ios开发证书 flutter ios开发一定要mac吗_ios_12


其中:

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


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

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

flutter ios开发证书 flutter ios开发一定要mac吗_dart_13



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

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

flutter ios开发证书 flutter ios开发一定要mac吗_app_14


接着配置签名:

flutter ios开发证书 flutter ios开发一定要mac吗_android_15

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

flutter ios开发证书 flutter ios开发一定要mac吗_ios_16


接着在Xcode点击运行按钮

flutter ios开发证书 flutter ios开发一定要mac吗_ios_17

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

flutter ios开发证书 flutter ios开发一定要mac吗_ios_18



Android开发环境设置

设置Android模拟机

点击:

flutter ios开发证书 flutter ios开发一定要mac吗_ios_19

选择Create Virtual Device

flutter ios开发证书 flutter ios开发一定要mac吗_android_20

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

flutter ios开发证书 flutter ios开发一定要mac吗_flutter ios开发证书_21

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

flutter ios开发证书 flutter ios开发一定要mac吗_flutter ios开发证书_22



启动Android模拟器

2种启动方法:

  • Android Studio中启动
  • 命令行启动:注意huawei是刚才定义的avd(Android Viutual Device)名称
emulator -avd huawei



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

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

flutter ios开发证书 flutter ios开发一定要mac吗_ios_23

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

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
//        google()
//        jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/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 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/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模拟器,成功后画面如下:

flutter ios开发证书 flutter ios开发一定要mac吗_android_24


将Flutter安装到Android真机上

打开华为Mate 40 Pro开发这模式,勾选USB调试接口,注意手机不要黑屏,手机和Mac Pro连接后选文件传输模式。

运行flutter devices检测📱是否连接成功

flutter ios开发证书 flutter ios开发一定要mac吗_ios_25


可以看到连接的手机LIO AL00(bodile),安卓系统是10.0

连接成功后运行Flutter程序

flutter ios开发证书 flutter ios开发一定要mac吗_flutter ios开发证书_26

按照提示安装apk,最终效果如下:

flutter ios开发证书 flutter ios开发一定要mac吗_dart_27

总结

配置开发环境过程一波三折,搜索了很多资料,为了表达清楚也借去了很多图片,在这里特别感谢CrazyCodeBoy,参考了他的文章,在这里表示衷心的感谢!