1 Windows/MacOS 下安装 Flutter 开发环境的步骤
Flutter 开发环境安装配置过程涉及大量的文件下载,由于 GFW 的存在,整个过程可能是漫长而痛苦的。
如果你已经可以科学上网,按照官方文档逐步去做就行,如果你有一个高速代理,可能会省事很多。否则建议做好用迅雷等 p2p 下载各种安装包的准备,所有涉及下载的文件均推荐采用迅雷等 p2p 工具下载。
安装配置 Flutter 开发环境的主要步骤包括:
- 下载安装 Git for windows
- 下载安装 java jdk,并配置相关环境变量
- 下载并解压 Flutter Sdk,配置相关环境变量
- 下载并安装 Android Studio
- macBook: 下载和配置 xcode 编辑器
- vsCode 编辑器:安装 Flutter 插件
Android Sdk
安装下载过程会比较长,可根据详细进度中显示的各种 zip 包下载地址,用迅雷工具下载各 zip 包,然后解压至 sdk 目录下的相应目录。
各 zip 包与解压位置参考:
- sdk-tools-windows-4333796.zip => Sdk
- platform-tools_r28.0.1-windows.zip => Sdk
- emulator-windows-5194135.zip => Sdk\emulator
- android_m2repository_r47.zip => Sdk\extras\android
- x86-28_r07.zip => Sdk\system-images\android-28\google_apis
- sources-28_r01.zip => Sdk\sources\android-28
Flutter 安装详细步骤请参考:
- https://flutter.io/docs/get-started/install/
- https://book.flutterchina.club/chapter1/install_flutter.html
- https://www.cnblogs.com/zxsh/archive/2018/04/16/8859048.html
2 Flutter 安装遇到的各种问题及解决方法参考
所有的主要问题根源基本都是 GFW 导致各种资源下载慢或下载失败,所以如果有个高速的代理大概就不会有这些烦恼了。
问题:Android Studio plugins repositories 无法搜索安装插件提示 Nothing to show
在 Android Studio
中按照以下步骤操作即可解决:
依次打开 File->Settings->Apparence & Behavior->System Settings->Updates->use secure connnection
,去掉复选框的勾选。
问题:卡在 Initializing gradle
主要原因是下载 gradle 过慢。可以手动下载后放到 gradle_dir 目录下。gradle 默认目录一般是 ~/.gradle/,如: C:\Users\lzwme\.gradle
。
手动下载 gradle 后放到 wrapper/dists/
里,在 terminal 输入 flutter config --gradle-dir /path/to/gradle
gradle 下载: http://services.gradle.org/distributions/
问题:卡在 Resolving dependencies
打开在项目的 android/build.gradle
文件,在 repositories
的头部添加 aliyun 的 maven 仓库。如:
buildscript {
repositories {
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.2.1'
}
}
allprojects {
repositories {
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
google()
jcenter()
}
}
rootProject.buildDir = '../build'
subprojects {
project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
project.evaluationDependsOn(':app')
}
task clean(type: Delete) {
delete rootProject.buildDir
}
问题:emulator: ERROR: x86 emulation currently requires hardware acceleration!
启动 Android 虚拟机报错:
emulator: ERROR: x86 emulation currently requires hardware acceleration!
Please ensure Intel HAXM is properly installed and usable.
CPU acceleration status: HAX kernel module is not installed!
原因为电脑没有启用虚拟技术或者没有安装Intel HAXM软件。
解决方法参考: https://blog.csdn.net/u012964796/article/details/46850461
问题:Dart SDK is not configured
Android Studio 安装完 Flutter 后,创建新的项目运行正常,但是从git上下的项目打开后就提示: Dart SDK is not configured
。
解决办法是手动设置 Flutter 的路径:
Mac:
依次打开 Preferences -> Languages&Frameworks -> Flutter
,设置 Flutter SDK Path 为 Flutter 文件夹路径
Windows:
依次打开 File -> Settings -> Language&Framework -> Flutter
,设置 Flutter SDK Path 为 Flutter 文件夹路径
问题:可能会涉及编码相关的报错 Bad UTF-8 encoding 0xb4
例如,点启动运行时有时会发生如下报错:
Running ‘gradlew assembleDebug’…
Finished with error: FormatException: Bad UTF-8 encoding 0xb4 (at offset 172)
Android Studio 设置默认编码为 UTF-8
即可:
- 依次打开
File -> Settings -> Editor -> File Encodings
,将所有涉及编码的设置都选择为UTF-8
。 - 依次打开
File -> Other Settings -> Default Settings -> Editor -> File Encodings
,将所有涉及编码的设置都选择为UTF-8
。
3 Flutter 优质学习资源收集(持续更新)
每个人喜好的学习方式各有不同,可先概览各学习资源,然后选定一或多个最适合自己的资源制定个人的学习路径。
建议先基于 Dart 和 Flutter 官网文档学习,再结合实例项目练习熟练。
欢迎留言推荐优秀的学习资源。
- Dart语言学习
- Flutter 学习
- 优秀 Flutter 插件库
- awesome-flutter An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.
- lpinyin Dart 汉字转拼音。支持 Flutter, web, other
- dio 一个强大的 Dart Http 请求库,支持 Restful API、FormData、拦截器、请求取消、Cookie 管理、文件上传/下载、超时等
- multi_image_picker 支持 IOS 和 Android 上多选图片
- Flutter 新手练习项目参考
- 官方示例 Flutter Sdk 目录下的 examples 目录中也有
- Flutter 高仿好奇心日报
- Flutter 仿网易云音乐
- Flutter 开发的干货集中营客户端
- flukit 一个Flutter UI组件库,暂无稳定版,源码可参考学习
- flutter-go flutter 开发者帮助 APP,包含 flutter 常用 140+ 组件的demo 演示与中文文档
- flutter_wanandroid 一个Flutter完整项目,包含启动页,引导页,主题色,国际化,Bloc,RxDart
- Flutter仿写单读App 通过仿写单读App,来练习一下常用的组件、布局、网络请求、json解析等
4 相关参考
- https://flutter.io/docs/get-started
- https://book.flutterchina.club/chapter1/install_flutter.html
- https://www.cnblogs.com/zxsh/archive/2018/04/16/8859048.html
- https://blog.csdn.net/u7Ckm/article/details/83552177
- https://blog.csdn.net/u012964796/article/details/46850461
写的很好,很喜欢