一、概要
Flutter发展已经逐步稳定,使用的人群和企业也越来越多,已经逐步得到了大家的认可。最近公司有一个项目,用户相对固定,因此打算使用Flutter来做一次实验,到底能不能做出我们能够接受的效果。
二、环境搭建
2.1 环境变量配置
说明:以下全部操作均在Windows上。
官网搭建说明:https://flutter.cn/docs/get-started/install
初次使用建议参考一下。
这里注意一点:为了正常升级和通过pub package 命令获取packages,需要设置两个环境变量,
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
windows下在如下地方配置 环境变量
2.2 获取FlutterSDK
可在 https://flutter.cn/docs/development/tools/sdk/releases下载最新的SDK版本。下载完成后将压缩包解压,放flutter整个目录放在对应的位置(如:D:\src\flutter)
请勿将Flutter 安装在需要高权限的文件夹内,例如 C:\Program Files\。
2.2.1 配置flutter环境变量
-
在开始菜单的搜索功能键入「env」,然后选择 编辑系统环境变量
-
在 用户变量 一栏中,检查是否有 Path 这个条目:
-
如果存在这个条目,以 ; 分隔已有的内容,加入 flutter\bin 目录的完整路径。
-
如果不存在的话,在用户环境变量中创建一个新的 Path 变量,然后将 flutter\bin 所在的完整路径作为新变量的值
-
2.3 运行flutter doctor
C:\Users\qs>flutter doctor
上述命令会检查你现有环境,并将检查结果以报告的形式呈现出来。有问题的地方,会使用 粗体 进行提示,并说明有对应的解决方案。
Running "flutter pub get" in flutter_tools... 14.6s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1348], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
X cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
X Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] Android Studio (version 4.1)
[√] Android Studio (version 4.2)
[√] Connected device (2 available)
! Doctor found issues in 1 category.
比如我当前环境有两个问题:
- cmdline-tools component is missing
- Android license status unknown
按照提示解决完成后,再次运行 flutter doctor
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1348], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] Android Studio (version 4.1)
[√] Android Studio (version 4.2)
[√] Connected device (2 available)
• No issues found!
这次可以看到没有提示环境问题。
2.4 安装Android Studio
Android Studio 的下载安装可以参考 https://developer.android.google.cn/
2.5 在Android Studio安装Flutter 和 Dart插件
- 打开插件偏好设置 (位于 File > Settings > Plugins)
- 选择 Marketplace (扩展商店),选择 Flutte 然后点击 Install (安装)
完成后重启AS。
三、Hello World体验
相关的环境配置完成后可新建Flutter项目,File > New > New Flutter Project,并配置Flutter SDK path后按照要求创建项目。
如有梯子可以不用配置,否则建议配置使用阿里云的镜像地址,否则很可能在运行的时候卡在 Running 'gradle assembleDebug,半个小时过去了估计都没有什么反应。
- 修改 android – build.gradle中的allprojects和repositories,按下面方式进行配置:
buildscript {
......
repositories {
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' }
google()
mavenCentral()
}
......
}
allprojects {
repositories {
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' }
google()
mavenCentral()
}
}
2.修改 flutter/packages/flutter_tools/gradle/flutter.gradle,按如下进行配置:
buildscript {
repositories {
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' }
google()
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.0'
}
}
配置完成后再运行项目,就能快速编译完成,并且在手机上安装运行。
最后
参考中文网站完成相关的操作步凑,加上自己是做Android开发的,基本上没有遇到什么坑,在运行的时候卡在 Running 'gradle assembleDebug,这个地方。当然凭借经验也猜到了是镜像的问题,自己平时的Android项目也会使用阿里云的镜像进行配置。更改配置后程序如期运行起来。