Flutter 开发环境安装配置、入门学习及相关优质资源

共计 4549 个字符，预计需要花费 12 分钟才能阅读完成。

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语言学习
  • Dart 官网 – https://www.dartlang.org
  • Dart 编程语言中文网 – http://dart.goodev.org
  • Dart 中文社区 – https://www.dart-china.org
  • Dart 语言中文站 – http://dart.hanguokai.com
  • 极客学院 Dart 教程 – http://wiki.jikexueyuan.com/list/dart/
• Flutter 学习
  • Flutter 官网 – https://flutter.io
  • Flutter中文网 – https://flutterchina.club
  • Flutter 中文网 – http://doc.flutter-dev.cn
  • Flutter 中文社区 – https://flutter-io.cn
  • Flutter Codelab – https://codelabs.flutter-io.cn
  • Flutter 掘金专栏
  • flutter-study
  • 技术胖-Flutter 基础视频教程25集
• 优秀 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