Flutter环境搭建ForMac
前言
Flutter
是谷歌开发的跨平台移动UI
开发框架,可以快速在iOS
和Android
上构建高质量的原生用户界面。Flutter
可以与现有的代码一起工作。在全世界,Flutter
正在被越来越多的开发者和组织使用,并且Flutter
是完全免费、开源的。
从今天开始,就进入Flutter
的学习了。本文主要记录Flutter
的环境搭建。
电脑环境:iMac(24-inch,M1,2021)
电脑系统:Mac OS 11.3
FlutterSDK
:2.5.1-stable
Flutter
的配置相比于以前来说简单很多了。本文选择Android Studio
作为开发Flutter
的工具。后续有机会再更新Visual Studio Code
。
一: 安装Flutter
这里的步骤其实和官网差不多,大家也可以直接参考Flutter官网。
1.1 下载Flutter
的SDK
1.1.1 Get started
进入Flutter官网,选择Get started
。
1.1.2 选择对应系统
1.1.3 下载SDK
下载最新稳定版本压缩包。
1.1.4 解压、配置SDK
下载完成后,就是配置SDK
路径了。
因为Flutter
的SDK
中包含了很多命令行工具,我们需要配置环境变量,所以建议你安装到你平时放命令行工具程序的地方!
本文解压之后,放在🏡目录下~/flutter
(仅供参考,安装在哪里看你自己的习惯)。
1.2 配置环境变量
1.2.1 配置镜像
Flutter
在运行时,需要去官方下载所需要的资源,由于众所周知的原因,如果没有“梯子”的话,就需要镜像服务器,Flutter
官方在下载SDK
的地方给出了相关的友情提示。
来到对应的Shell
配置文件进行配置。Mac
新系统默认是zsh
,就配置~/.zshrc
,老系统默认是bash
,就配置~/.bash_profile
。
.zshrc
为隐藏文件
,同时按住shift + command + .
可以显示或隐藏隐藏文件
。
# Flutter 镜像配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
1.2.2 配置Flutter
环境变量
接下来,配置Flutter
命令行工具的路径。还是对应Shell
的配置文件中。
# Flutter 配置
export FLUTTER=~/flutter
export PATH=$FLUTTER/bin:$PATH
配置完成后,重新打开终端或输入命令载入配置。
# zsh 重新载入配置
source ~/.zshrc
source ~/.profile
# bash 重新载入配置
source ~/.bashrc
source ~/.bash_profile
接下来使用doctor
检测指令检测Flutter
环境。
flutter doctor
如果运行结果全部✅就是配置OK
了,❎就是还没有配置好的。
Flutter
环境已经配置好了,接下来就是配置安卓环境了。
二: 配置安卓环境
2.1 安装Android Studio
先去国内Android Studio
官网下载最新安装包。
intel
芯片选择Mac with Intel chip
,Apple M1
芯片选择Mac with Apple chip
。
2.2 配置SDK
根据安装向导,我们需要安装Android SDK,Android SDK Tools,Android SDK Command-line Tools,Android SDK Platform-Tools 和 Android SDK Build-Tools
,安装过程无需翻墙。
也可以同时点按command + ,
进入偏好设置,如下图安装。
2.3 安装Android Studio
插件
command + ,
打开Android Studio
偏好设置,安装Flutter
插件(欢迎界面的Plugins
模块同样可以安装)。
当跳出需要安装
Dart
插件时,也点击install
进行安装。
- 安装完成后,重启
Android Studio
。
- 可以看到在欢迎界面,已经有了
New Flutter Project
的选项。
2.4 解决JDK
的问题
cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
flutter doctor -v
2.5 解决许可证问题
- 再次运行
flutter
的检测命令flutter doctor
,会发现许可证问题!
- 终端输入如下命令,然后全部
y
即可。
flutter doctor --android-licenses
2.6 配置安卓模拟器
如果你是
M1
版iMac
,那么你就先老老实实使用Android Studio
自带的安卓模拟器吧,等后续夜神模拟器适配之后再切换。就像笔者一样。😂
安卓自带模拟器又丑又慢,所以我们选择一款国内的“夜神”模拟器。类似的模拟器有很多,选择它主要是因为它有Mac
版本。
- 进入官网,直接下载最新安装包。
- 安装模拟器。
- 安装完之后启动,在
Android Studio
就会有显示了。
如果启动过程中遇到了什么问题(比如卡在99%进度),请访问夜神模拟器Mac版本常见问题。
2.7 解决Gradle
卡住问题
当Flutter
项目首次运行时,你会发现卡住不动了(如果没卡住,那跳过2.7
),原因是Gradle
的Maven
仓库在国外。你懂的(当然,如果你有梯子,那当我没说🤐)。
此时我们可以通过配置镜像的方法解决(注意:每个Flutter
工程都需要配置)。配置如下:
2.7.1 修改项目下的build.gradle
文件
- 文件路径:项目 -->
Android
-->build.gradle
文件 - 修改内容:找到
buildscript
和allprojects
将里面的:
google()
mavenCentral()
修改为阿里云镜像
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'}
如下图:
2.7.2 修改Flutter
安装目录中的flutter.gradle
文件
- 文件路径:
~/flutter/packages/flutter_tools/gradle/flutter.gradle
- 修改内容(加入阿里镜像):
配置好之后,Flutter
项目就可以正常较快的启动了。
总结
Flutter
的开发环境搭建到这里就完成了,还是比较简单的。
下篇文章将记录示例项目的运行与调试。敬请期待。
转载自:https://juejin.cn/post/7017621020395700232