手摸手教你如何在Windows平台下搭建Flutter开发环境

Flutter是什么?

Flutter是由谷歌推出的应用程序开发框架，可用于编写客户端应用程序、服务端应用程序、Web应用程序，桌面应用程序等(感觉什么都想做，看这架势，是想一统天下)。使用的是Dart编程语言, Dart语言是一种静态类型的编程语言，同时具有面向对象和函数式编程的特性。

Android-Stduio和Android-SDK是什么关系?

外行容易搞混这两者。Android SDK 是一个开发包，里面包含了Android开发的各种库文件。提供了驱动Android的基础框架，Android的模拟器功能也是由Android SDK支持的，Android SDK依赖于JDK。JDK（Java SE Development Kit ）由当年的Sun创造，现在归属于Oracle，在Windows、Mac、Liunx系统上需要配置JDK系统环境才能跑Java程序。

Android-Studio是一个IDE（集成开发环境软件），与Eclipse是一类东西, 是开发Android的主流IDE。是Google在2013年I/O大会上发布，用来开发Android应用的编码工具。它是Google基于IDEA重新开发的免费工具。Google正在力推开发者用Android-Studio替换Eclipse做开发。

Android开发环境的配置顺序是 JDK==>Android SDK==>Android Studio , 首先是Java的环境配置，接着是配置Android-SDK。Android-SDK不是独立安装的，安装完Android-Studio后，会有Android-SDK的安装配置过程，可以在Android-Studio的Tools菜单下面的SDK Manager管理器里面查看与配置Android-SDK。

用Flutter开发应用IDE选VSCode还是Android Studio?

因为Android-SDK绑定到Android Studio里面了,所以不管怎样，都需要安装Android Studio。简单需求可以在VSCode中开发，但VSCode并不支持原生项目。当需要写插件或者调用安卓端的原生接口通信时，只能用Android Studio。此外，当原生配置存在一些问题时，用Android Studio打开工程，make编译工程，很多时候可以解决问题。

Flutter开发环境搭建

Flutter开发环境搭建概括起来，主要就是安装配置Flutter、Android-Studio、Visual Studio, 其中Android-Studio的配置相对麻烦一些。

安装配置Flutter

首先去Flutter中文官方网站下载Windows版本的Flutter。Flutter安装包由两部分构成，一部分是Flutter SDK，另一部分是Dart SDK(因为Flutter是基于Dart的)。下载完Flutter安装包，解压就是安装, 解压之后，需要配置系统环境变量。在任务栏的搜索框输入环境，进入到编辑系统环境变量界面

在系统变量下,给Path环境变量项后面添加Flutter的bin文件夹路径(与前面的环境变量以分号相隔)。

添加完flutter环境后，重新打开一个命令行窗口，用where flutter dart命令测试一下，如果回显信息没有错误，说明环境变量配置正确。

接着运行flutter doctor检查各个依赖项配置是否正确，逐个安装打红叉的提示项

上图提示检查平台依赖发现没有安装Android toolchain(Android SDK),Visual Studio,Android Studio，我们先安装一下Visual Studio,Android-SDK和Android Studio是一起安装的。

安装Visual Studio

如果要用Flutter开发Windows 桌面应用，除了安装Flutter SDK 以外还需要安装Visual Studio 2022 或 Visual Studio 2022 生成工具。在选择安装 Visual Studio 时或生成工具的时候，要选择使用 C++ 的桌面开发，包括其所有默认组件，以安装必要的 C++ 工具链和 Windows SDK 的头文件。 下载时选择社区版的Visual Studio，因为其它两种版本都要收费。 我们选择Visual Studio 2022进行安装（从命名上感觉，这个比生成工具的功能全，易于扩展），下载Visual Studio之后，安装很简单。

安装之后，在已安装==>修改==>工作负荷中可以查看使用 C++ 的桌面开发模块是否处于启用状态。

安装配置Android Studio

Flutter 依赖 Android Studio 的全量安装为其提供 Android 平台的支持。下载Android Studio并进行安装。下载时必须同意Android Studio声明的使用条款和协议，才能下载安装包。

运行Android Studio安装向导程序，默认会安装最新的Android SDK， Android SDK Platform-Tools 以及 Android SDK Build-Tools，这些都是用Flutter开发 Android 应用时所需要的。

Android Virtual Device (AVD) 是Android模拟器，用于在开发机上运行和测试 Android 应用。用它模拟真实的 Android 设备，包括硬件配置（如内存、处理器、屏幕分辨率等）和操作系统版本。因此，如果要在开发机上测试和调试 Android 应用，则需要安装 AVD。建议勾选。

安装目录建议换个目录，不要安装在C盘, C盘剩余磁盘空间不足的话，系统运行会比较缓慢。当然，你的C盘空间充足的话，当我没说。

不要勾选Do not create shortcuts, 为了启动应用方便，建议创建开始快捷方式。

安装完成之后，开始配置Android Studio, 第一个弹出的窗口，说Google会对Android Studio工具软件的基本使用情况和崩溃报告进行匿名统计。这些数据用来帮助改善 Android Studio 工具。询问是否允许发送这些数据给谷歌。个人学习无所谓，在公司开发使用的话，建议选Dont't send.

接着Android Studio弹出的窗口，说无法访问Android-SDK插件列表, 不用慌，先点击Cancel按钮，接着点击Next按钮就会进入到Android-SDK的插件安装界面。

Android-SDK插件下载之后有5G之多，有点太占用C盘空间，我们重新选择一个安装目录

选择接受Android-SDK-License条款，点击Finish按钮进行安装。

由于自定义了Android-SDK的安装目录, 所以在运行flutter doctor命令之前，用flutter Config命令手动配置一下Android SDK的安装目录。

flutter config --android-sdk E:/ProgramFile/Android/Android-SDK

运行flutter doctor命令, 提示还需要安装cmdline-tools,以及同意android-licenses协议条款。

先安装一下最新的Command-line Tools，点击apply按钮后还会弹出一个确认框，点击确认框中的OK按钮。

再执行一下同意Android协议命令，会出现很多协议问询对话，都输y。

flutter doctor --android-licenses

安装配置完Android Studio之后运行Flutter doctor,重新检查平台依赖安装情况, 可以看到，一切都OK了。

点击Plugins开始安装Dart和Flutter插件。

安装Flutter插件时，会弹出一个窗口,说这个插件不是来自JetBrains, JetBrains对任何第三方插件供应商对您的个人数据的任何处理不承担任何责任。要用自行承担风险，这里选择接受。安装之后按照提示重启Android Studio。

重启之后, 你会发现出现一个New Flutter Project的菜单图标，现在flutter的开发环境已经配置好了，接下来我们创建自己的第一个flutter项目。

创建自己的第一个Flutter项目

创建flutter项目

点击New Flutter Project的菜单图标之后,选择左侧的Flutter导航菜单,接着在右侧选择Flutter安装目录。

在第二步，输入项目名和项目路径, 这个页面有个Create project offline的复选框菜单,它的含义是创建 Flutter 离线项目。在离线环境下，创建 Flutter 项目需要下载 Dart SDK 和 Flutter SDK 的离线安装包并安装。可能无法使用 Flutter 包管理器（pub）下载依赖项，需在有网环境下获取这些依赖项，将它们复制到离线项目中。其它项的含义如下图所示：

点击创建之后，项目就创建好了。想看flutter项目运行效果，还得安装手机模拟器。

安装手机模拟器

点击Android Studio菜单栏的Tools菜单下方的Device Manager菜单

点击Create virtual device，创建一个模拟器，选择手机型号，这里选的是Pixel2，点击Next。

选择操作系统，这里选择的是Android-12, 选好系统后点击下载图标进行下载。

这里得耐心等待一会儿，要下载1.1GB内容。

等手机操作系统下载完之后，点击Finish就会切换到已有虚拟机列表，点击三角号运行。模拟器刚启动的时候，电脑的噪音一下子变大了许多，过会儿才恢复宁静。看了一下模拟器占用的空间是9.2G, 配置低的电脑得悠着点。

运行flutter项目

首次运行Flutter项目时，会发现一直卡在Running Gradle task assembleDebug...转圈，原因是Gradle的Maven仓库在国外。解决方法是：修改Android项目的build.gradle以及flutter sdk中的flutter.gradle文件，将国外镜像修改成国内阿里云镜像。

在这两个文件中，需要注释的两行是：

    repositories {
         google()
         mavenCentral()
   }

需要添加的四项是：

    repositories {
   
        maven {
            url 'https://maven.aliyun.com/repository/public'
        }
        maven {
            url 'https://maven.aliyun.com/repository/google'
        }
        maven {
            url 'https://maven.aliyun.com/repository/gradle-plugin'
        }
        maven {
            url 'https://maven.aliyun.com/repository/central'
        }
   }

• 文件路径1：你的flutter项目路径\android\build.gradle 文件，找到buildscript和allprojects这两项，做如下修改:

• 文件路径2：E:\ProgramFile\flutter\packages\flutter_tools\gradle\flutter.gradle,做如下修改

改完保存之后再次运行项目，可以看到，官方的示例demo已经在模拟器中运行起来了。

如何在真机上运行flutter项目呢？要想在在真机上运行flutter项目，需要开启手机上的USB调试模式，笔者Android手机开启调试模式的方法是:

1. 点击"设置"→"系统"→"关于手机"→"版本号（连续点击7次后返回"设置-系统"）"→"开发人员选项"→"打开开发者选项开关"→"打开USB调试模式开关"
2. 手机USB连接电脑时选择文件模式，接着会弹出一个问询窗口，点击确定。

如果连接正常的话，在Android Studio==>Device Manager==>Physical面板下,可以看到识别出来的真机。

点击Android Studio中的运行项目的绿色三角按钮, Android Studio会给真机安装项目的apk包，并启动运行，效果如下：

最后

至此，Windows下的Flutter开发环境已经搭建起来了，接下来就得学习Dart这门开发语言了。用惯了VSCode, 感觉Android Studio不如VSCode界面看着清爽，后续学习Dart编程语言打算把IDE切换到Flutter。如果你能看到这里，恭喜你, 在将来学习Flutter，搭建开发环境时又多了一篇参考文章，能少走一些弯路。这就是对勤奋好学者的奖励。