最近正式入坑 Flutter,首先从环境搭建开始,看了网上好多关于 Windows 环境搭建的资料,基本都是按官方文档写的,看完的感受是,还不如直接去看官方文档。

官方英文文档传送门:Get Started: Install on Windows

本文主要总结我实际搭建的过程,最后发现不一定按网上那些博客或者官方文档写的来也可以搭建成功。

总的来说需要的也就 4 样东西,找齐了配置一下就 OK;

  1. Flutter SDK (建议下载官网的,下载完直接能用)
  2. 下载 Dart 插件
  3. 下载 Flutter 插件
  4. 准备 ide(Androidstudio 或者 IntelliJ IDEA)配置 flutter 的 SDK 即可

说明

  • IntelliJ IDEA 通过 plugins 下载的插件都是放在安装目录下的 plugins 文件中,自己看一下就明白。
  • Androidstudio 通过 plugins 下载的插件是放在默认位置的,这一点和 IntelliJ IDEA 不太一样,我本地的默认的路径是在 C:\Users.AndroidStudio3.1\config\plugins 中,假如你已经有了 Dart 和 flutter 插件,可以解压后直接拷贝到该目录下即可。

详细的安装过程如下:

# 1. 安装 Flutter SDK

首先下载官方文档中 flutter_windows_v0.4.4-beta.zip 压缩包(如下图红框中所示),解压到自己指定的位置,解压完文件夹名称叫做 flutter,这就是 Flutter SDK 了(后面再 ide 中配置的时候需要)。同时将该文件夹中的 bin 添加到环境变量中。

# 2. 安装 Dart 和 Flutter 插件

# (1)Flutter 需要如下两个插件的支持:

  • Flutter 插件用来支撑 Flutter 开发者的流程(运行,调试,热加载,等等)
  • Dart 插件则提供代码分析(代码合法性校验,代码补全等等)

# (2)然后在 Androidstudio 或者 IntelliJ IDEA 中下载 Dart 插件

假如下不了,那就是没有进行科学上网的原因,也可以通过科学上网访问下面的链接进行下载。假如是自己通过如下链接下载的,则把下载后的 zip 包解压后将整个文件夹复制到你使用的 ide 的 plugins 文件夹中(整个文件夹拷贝到 plugins 下即可)。
https://plugins.jetbrains.com/pluginManager/?action=download&id=Dart&build=IU-172.3757.52&uuid=076050b4-d279-493c-945e-5fb3ff2af32e

# (3)然后在 Androidstudio 或者 IntelliJ IDEA 中下载 flutter-intellij 插件

假如下不了,那就是没有进行科学上网的原因,也可以通过科学上网访问下面的链接进行下载。假如是自己通过如下链接下载的,则把下载后的 zip 包解压后将整个文件夹复制到你使用的 ide 的 plugins 文件夹中(整个文件夹拷贝到 plugins 下即可)。
https://plugins.jetbrains.com/pluginManager/?action=download&id=io.flutter&build=IU-172.3757.52&uuid=076050b4-d279-493c-945e-5fb3ff2af32e

# (4)说明:使用自己的 ide 安装步骤如下:

  1. 启动 Android Studio
  2. 打开插件面板如下图所示
  3. 选择【Browse repositories…】,勾选 Flutter plug-in 然后点击 install
  4. 当提示是否安装 Dart 插件时点击 Yes
  5. 安装完成后重启 AS



其实到这我们需要准备的东西已经全了,下面看如何配置。

# 3. 配置 Dart 和 Flutter 插件到我们的 ide 中

我使用的是 IntelliJ IDEA,Androidstudio 类似。

打开 ide,Create New Project——> 选择 Flutter,选择 SDK 路径后 Next——> 命名项目名(小写),选择项目存储路径后 ok。

然后进去以后可能你看到并没有下载项目资源,不要慌,我们配置一下,具体的如下所示,第一张是配置 DartSDK 的路径(指向前面 flutter 的 SDK 中的 bin\cache\dart.sdk),第二张是配置 flutter SDK 路径。配置完成后重启 ide,再重新创建新项目即可,等待的时间会比较长,耐心等待完成就可以开启 flutter 之旅了。

另外有几点说明:

(1)本人是移动端开发所以不管是 Androidstudio 或者 IntelliJ IDEA 都已经搭建好了,相关环境的搭建可查阅网络。

(2)本文前面教程中是以 IntelliJ IDEA 为基础描述的,假如你使用的是 Androidstudio 的话需要升级版本至 3.1 以上,然后在 Androidstudio 的 Plugins 中下载 Dart 和 Flutter 插件然后重启,就会在创建项目的界面出现创建 Flutter 的选项,然后创建 flutter 项目,配置本文中描述的 flutter-SDK 路径就可以了。

(3)可能有人看网上的资料迷糊,如下图怎么来的,其实在咱们下载的 flutter_windows_v0.4.4-beta.zip 解压包中有 flutter_console.bat,双击就可以唤起如下界面。它便是 flutter 的控制台,我们可以在 flutter 控制台运行 flutter doctor 命令,检测是否有依赖项未安装。

(4)文中提到的资料包,有无法下载的可以在文末留言,给我个邮箱,我可以打包共享。

# 4. Flutter 学习必备资源

# 一、Flutter 相关资料

Flutter 的源码 GitHub 仓库地址 https://github.com/flutter/flutter

Flutter 官方文档(英文)

Flutter 官方文档中文镜像站

Flutter 中文网(包括中文官方文档和官方文档中文镜像站类似)

Flutter 中文开发者论坛

Flutter 社区中文资源网站

Flutter 插件资源中文网站 (包括各种 flutter 相关的插件资源包)

CSDN ——flutter 系列教程:点击打开链接 ,可参考(其中有些内容已经过时),建议主要看 flutter 官方文档。

Flutter 资源聚集地 GitHub 资料,主要收录 Flutter 开发相关资源。

# 二、Dart 相关资料

Dart 官方文档中文镜像站

Dart 语言中文社区 — 中国最大的 Dart 语言编程学习交流社区 (该网站包含 Dart 系统的学习教程,内容比较丰富)

# 三、Flutter 常用的一些操作命令

flutter channel 查看当前分支。

flutter channel beta /flutter channel master 更改分支。

flutter upgrade 更新 flutter 版本。

要同时更新 Flutter SDK 和包,使用应用程序根目录(包含 pubspec.yaml 文件的同一目录)的 flutter upgrade 命令。

flutter packages get 或 flutter packages upgrade 命令来管理依赖关系。

flutter packages get 获取 pubspec.yaml 文件中列出的所有依赖项。

flutter packages upgrade 以获取 pubspec.yaml 文件中列出的所有依赖关系的最新版本。