最近需要做移动端项目,在决定采用Flutter
技术栈之后便开始了「从零学习Flutter开发」过程。没想到在第一步开发环境搭建过程中,就遇到了不少的坑。
Flutter
官网给了开发环境的配置过程:flutter.cn/docs/get-st… ,不过我个人不喜欢官方的配置流程,手动下载SDK比较难维护、需要下载Xcode和Andriod Studio、没有使用VS Code开发等 要求都让人很不舒服。
所以最终采用了brew
+ VS Code
+ Android SDK
+ Android 真机
的方式搭建开发环境。
安装Flutter
我们这里使用brew
来安装,这样不需要手动设置Flutter
的环境变量,同时安装卸载流程都比较方便。
国内用户使用brew
的时候还是推荐设置国内源,通过以下命令设置brew的清华源
。
export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git"
for tap in core cask{,-fonts,-drivers,-versions} command-not-found; do
brew tap --custom-remote --force-auto-update "homebrew/${tap}" "https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-${tap}.git"
done
brew update
源更改完成后可以通过以下命令自动安装Flutter SDK
。
brew install --cask flutter
等待安装完成后执行flutter doctor
命令,出现如下执行结果说明安装成功。
安装Android SDK
安装JDK8
安装Android SDK
之前我们需要安装JDK8
(是的,必须得JDK8
,新版本的都不好使)。这里依然通过brew
来安装。
brew install --cask temurin8
安装完后通过以下命令查看本机已安装的JDK
版本。
/usr/libexec/java_home -V
在.profile
文件中或者通过如下命令配置JDK
版本为1.8
。
export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)
安装SDK
通过brew
安装android-sdk
如下。
brew install --cask android-sdk
安装完成后通过sdkmanager
命令安装其他依赖包,如果执行sdkmanager
命令报错说明JDK
环境配置错误,不是使用的1.8
版本。
sdkmanager "platform-tools"
sdkmanager "platform-tools" "platforms;android-28"
sdkmanager "platform-tools" "build-tools;28.0.3"
sdkmanager "cmdline-tools;latest"
使用brew list android-sdk
命令查看SDK安装目录如下:
在.profile
文件中或者通过如下命令设置SDK的环境变量。
export ANDROID_HOME=/opt/homebrew/Caskroom/android-sdk/4333796
export PATH=$PATH:"$ANDROID_HOME/platform-tools"
export PATH=$PATH:"$ANDROID_HOME/tools"
配置完成后,执行如下命令进行Android Licences
签署。
flutter doctor --android-licenses
执行成功后再次执行flutter doctor
命令可以看到Android toolchain
一栏已经处于正常状态。
配置VS Code
插件安装
在VS Code
插件市场搜索插件flutter
并安装,在安装时也会自动安装dart
语法插件。
新建项目
flutter
插件安装完成后,使用快捷键command + shift + P
调起命令查找,输入flutter
,选择创建新的项目。
按照步骤创建完成项目后,会自动生成flutter
的示例项目。我们可以通过/lib/main.dart
中的入口函数来启动项目,在编辑器左侧可以查看当前项目的Widgets
结构,在编辑器下发可以打开Dart devtools
或者选择不同的预览设备。
预览Demo
真机运行
完成上述配置后,我们可以通过数据线将Android
真机连接mac
,连接成功后通过flutter devices
命令或者VS Code
底部状态栏都可以看到我们的设备。
此时我们可以通过在项目目录下执行flutter run
命令来尝试启动我们的项目(这里不推荐直接通过VS Code启动,这样会看不到报错信息)。等待编译之后会发现项目启动失败,可以看到如下的错误信息。
比较明显的一个问题是说我们需要Java 11
及以上的版本,可以通过修改环境变量来解决该问题(前面提到的JDK8只是用来安装Android SDK的,安装完成之后我们就可以升级版本,不会影响Android SDK的使用)。
export JAVA_HOME=$(/usr/libexec/java_home)
升级完成之后再次执行flutter run
命令会发现flutter
要求使用Android SDK 30
以上的版本,命令行会自动进行安装升级,只需要耐心等待安装完成即可。
如果有🪜的话,安装完成便会自动在真机上安装APP并唤起,在命令行可以看到如下信息。
修改Android配置
对于墙内的同学,在上一步Android
编译的时候可能会失败,主要原因是项目构建依赖的Android
包无法下载,可以通过替换国内源的形式解决。
将项目目录下的/android/build.gradle
文件以及flutter sdk
目录下的/packages/flutter_tools/gradle/flutter.gradle
文件中google()
和mavenCentral()
替换为如下地址。
maven { url 'http://maven.aliyun.com/nexus/content/repositories/google' }
maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'}
maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
替换后build.gradle
文件内容为:
buildscript {
ext.kotlin_version = '1.6.10'
repositories {
maven { url 'http://maven.aliyun.com/nexus/content/repositories/google' }
maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter'}
maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
}
dependencies {
classpath 'com.android.tools.build:gradle:7.1.2'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
allprojects {
repositories {
maven { url 'http://maven.aliyun.com/nexus/content/repositories/google' }
maven { url 'http://maven.aliyun.com/nexus/content/repositories/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
}
总结
本文全程使用brew
来进行安装,可以很方便的进行依赖管理,后续升级或者卸载也都容易实现。最最重要的则是不需要下载庞大的Xcode
和Android Studio
,在环境搭建过程中可以节省一大半的下载时间,而且还不需要占用内存哟~
推荐大家将brew
的源替换为国内源,还是要比🪜快一些的。
最后祝大家入坑愉快~ 🎉🎉🎉