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

目录
[隐藏]

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 安装详细步骤请参考:

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 官网文档学习,再结合实例项目练习熟练。

欢迎留言推荐优秀的学习资源。

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
点赞 (7)
  1. 紫书海说道:
    Firefox 61.0 Firefox 61.0 Windows 7 x64 Edition Windows 7 x64 Edition

    写的很好,很喜欢

回复 紫书海 取消回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code