Flutter开发环境在Mac上的搭建(iOS和Android图文详细过程)
文章目录
- 系统要求
- 本机环境
- 设置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
- 点击Flutter官网下载最新的安装包,这里选用的是macOS系统1.20.2稳定版(
flutter_macos_1.20.2-stable.zip
)。 - 解压缩到安装目录(这里我在用户becomebamboo下新建了development目录)。
cd /Users/becomebamboo/development
unzip /Users/becomebamboo/Downloads/flutter_macos_1.20.2-stable.zip
- 将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,下载地址为:
- 国外:https://developer.android.com/studio
- 国内:https://developer.android.google.cn/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-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和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 '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安装到Android真机上
打开华为Mate 40 Pro开发这模式,勾选USB调试接口,注意手机不要黑屏,手机和Mac Pro连接后选文件传输模式。
运行flutter devices
检测
Flutter开发环境在Mac上的搭建(iOS和Android图文详细过程)相关推荐
- Mac上搭建Flutter开发环境(Android模拟器和IOS模拟器开发)
前言 最近公司要求使用跨平台语言开发新的应用,这几天也对比了ReactNative和Flutter,最终决定入坑Flutter,今天刚配置完Flutter的开发环境,Flutter中文网也有相应的安装 ...
- Flutter开发之搭建Flutter开发环境(三)
回首demo.之前的工程突然,无法iOS上运行了.重装了最新的Xcode.然后VS Code 终端运行 flutter packages get 再打开Xcode 设置开发证书.再在iOS真机或者模拟 ...
- Flutter学习笔记01:搭建Flutter开发环境
文章目录 一.Flutter概述 二.安装Git for Windows (一)下载Git (二)安装Git (三)配置环境变量 (四)命令行运行Git 三.安装Android Studio (一)下 ...
- Flutter系列之在 macOS 上安装和配置 Flutter 开发环境
本文为Flutter开发环境在macOS下安装全过程: 一.系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不 ...
- 【Flutter开发环境搭建】二、Android SDK、Dart SDK及Flutter SDK安装
一.Android Studio下载安装 Android Studio下载:Download Android Studio and SDK tools | Android Developers 下 ...
- 超级详细flutter开发环境搭建
一.在Windows上搭建Flutter开发环境 系统要求 要安装和运行Flutter,您的开发环境必须满足以下最低要求: 操作系统Windows 7 SP1或更高版本(64位)磁盘空间::400 M ...
- Android Flutter开发环境搭建
1.搭建 Flutter 开发环境 本栏亦在快速上手Android Flutter,Flutter框架就不介绍了,框架这个东西怎么说呢,对于大部分人来说只是了解即可,如需了解的话,可以度娘资料很多. ...
- 【Flutter】Flutter 开发环境搭建 ( 2021年08月25日 补充最新资料 | 最新安装教程 )
文章目录 前言 一.Android Studio 环境安装 Flutter / Dart 插件 二.Flutter SDK 下载 三.设置 Flutter 环境变量 1.设置 Flutter SDK环 ...
- 【Flutter】Flutter 开发环境搭建 ( Android Studio 下 Flutter / Dart 插件安装 | Flutter SDK 安装 | 环境变量配置 | 开发环境检查 )
文章目录 一.Flutter 学习资料 二.Flutter 开发环境搭建 三.Android Studio 环境安装 Flutter / Dart 插件 四.下载 Flutter SDK 五.设置 F ...
最新文章
- 设置VSCode快捷键Alt+U(首字母转换为大写)、Shift+Alt+U(全部转换为大写)、Shift+Alt+L(全部转换为小写)
- 图灵奖得主吐槽中国高校「重科研,轻教育」怪象!高校教师评价体系是元凶?...
- StringUtils常用方法+StringUtils详细介绍
- yolt 卫星图像进行快速目标识别的新方法
- JAVA WEB知识总结之一--入门
- Ymordem学习使用
- C语言博客作业--结构体
- 图形的花样翻转(洛谷P1205题题解,Java语言描述)
- 大话项目管理工具之Confluence篇
- python input 文件路径_python 文件与目录操作
- systemback慎用:安装后无法启动
- ubuntu显示时间不正确的问题解决
- python:相对路径的参照物会发生变化
- tbody css 高度,html – CSS:无法为%滚动设置tbody height
- 证:单层感知机不能表示异或逻辑
- 1133_SICP开发环境搭建
- php 微信朋友圈 更新时间,微信朋友圈可见天数怎么设置
- 同步时序逻辑电路分析——数电第六章学习
- 绿米Aqara、智汀、Homekit等设备如何完成一键跨品牌联动
- 记一次cnpm install的各种报错深刻记忆
热门文章
- 03-树2 List Leaves(25 分)
- SAP_MB5B历史库存查询
- [分享]HP大中华区总裁孙振耀退休十五天后九大感言
- 如何使用ChromeHeadLess 技术实现后台对前台页面截屏
- javascript事件列表详解
- 解析红白机游戏设计元素,经典的绝不只是“人物”
- Trie(字典树)解析及其在编程竞赛中的典型应用举例
- Python的发展历史及特点
- 聚丙烯酸离子液体|聚乙烯亚胺离子液体|聚酰胺离子液体
- html5加载文字特效免费,纯CSS3创意loading文字特效