[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

时间:2023-03-08 17:24:24
[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

前两天网友在群里说起了Flutter,就了解了一下,在手机上跑了它的demo,直接就被打动了。

虽然网上有很多教程,但真正开始的时候,还是会碰到很多坑。下面详细的讲解Flutter + Android Studio开发环境搭建。

Flutter社区和资源传送门

Flutter支持哪些设备和操作系统版本?

移动操作系统:Android Jelly Bean,v16,4.1.x或更新的版本以及iOS 8或更新版本。

移动硬件:64位iOS设备(从iPhone 5S和更新的iPhone型号开始)以及ARM Android设备。

请注意,我们目前不支持:

  • ARM32 iOS设备(iPhone 4,iPhone 5;问题#2089
  • x86 Android设备(问题#9253

我们支持使用Android和iOS设备(包括Android模拟器和iOS模拟器)来开发测试Flutter应用。

我们测试了各种低端到高端手机,但我们还没有官方设备兼容性保证。

我们不会在平板电脑上进行测试,因此平板电脑上的某些widget可能会出现问题。我们尚未在我们的widget中实施针对平板电脑的改动。

1. 安装 Java SDK

百度搜索Java sdk,打开官方网站下载。

网址: http://www.oracle.com/technetwork/java/javase/downloads/index.html

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

下载最新版本的SDK,点击上图框出的区域,进入下载页面。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

先接受协议,然后点击最后一行中的 jdk-10_windows-x64_bin.exe 进行下载。(假设你也是64位电脑!如果不是,自行搜索其它的教程。)

Java JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境。

Java JRE是Java Runtime Enviroment是指Java的运行环境,是面向Java程序的使用者,而不是开发者。

Java SE 就是包含了JDK和JRE的安装包。我们下载的就是这个。

下载完成后,开始安装。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

这一步配置好安装路径。然后再下一步继续安装。

出现安装jre向导,一样的配置好路径下一 步。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

jdk 安装成功。

2. 配置 JDK 环境变量

打开 “我的电脑”->“属性”->“高级系统设置” 出来系统属性对话框,然后切换到“高级”选项卡,点击“环境变量”按钮打开环境变量配置对话框。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

新建系统环境变量 ”JAVA_HOME“

设置JAVA_HOME值为JDK安装目录,如  D:\Android\JDK\jdk-10

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

新建环境变量CLASSPATH

设置CLASSPATH值为: ./;%JAVA_HOME%/lib/tools.jar;%JAVA_HOME%/lib/dt.jar

./;%JAVA_HOME%/lib/tools.jar;%JAVA_HOME%/lib/dt.jar

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

(注意:点号表示当前目录,不能省略)

更新系统环境变量Path

将 “;%JAVA_HOME%\bin;” (注意:这里的分号不能省略), 添加到Path 最前面。

将 jre 安装路径的bit目录添加到path。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

点击确定保存。

打开cmd,输入 java -version 可以查看到我们安装java版本。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

3. 安装和配置 Git

Flutter需要使用git来获取,所以需要先安装 Git。如果已经安装,请跳过安装,但需要检查一下是否设置环境变量。

网址: https://git-scm.com/download/win

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

我们下载64位的安装包。下载完成后开始安装。

安装完成后,在系统环境变量Path中查看是否存在git的cmd目录,没有则添加。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

4. 下载 Android Studio

网址: http://www.android-studio.org/index.php/download  (这里的版本是:3.0.1.0)

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

5. 安装 Android Studio

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

配置好安装目录,Next开始安装。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

安装完成。运行 Android Studio。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

这里如果没有安装过,就选“Do not import settings”,否则选择第一项,并指定路径。我这里是全新安装,所以选择第二项。

点击OK,android studio 开始启动。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

启动时会弹出如下图

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

这个是设置http代理的,不需要点 Cancel 进入AS安装向导界面。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

点击next进入UI界面主题选择界面,可以选择自己喜欢的风格。

继续next,下载组件 (Android SDK, NDK,编译工具等),等待下载完成。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

设置好 Android SDK 安装位置。Next...

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

下载完成后,点击 Finish ,然后退出 Android Studio。

Android SDK安装完毕后,还需要新增一个环境变量:

变量名:ANDROID_HOME 
变量值:E:\Program Files (x86)\AndroidSDK (更新成你真正的SDK位置)

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

再到Path下,加入下面这段:
%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

然后重启电脑,否则后面可能会报找不到Android SDK的错误。

友情提醒

这个AndroidSDK文件夹最好不要放到C盘,因为安卓系统的镜像、以后会用到的各种组件都会存放到这个文件夹,随着开发量的增加,这个文件夹会越来越大,C盘可能吃不消。

如果是无脑安装Android Studio和Android SDK的,Android SDK默认是存放到C盘一个隐藏文件夹下的目录(C:\Users\Administrator\AppData\Local\Android\sdk),就像上图一样,把Android SDK文件夹剪切到C盘以外的其他盘,然后在这里改成新的路径即可。

6. 下载和安装 Flutter

官网地址: https://flutter.io/

Flutter是开源在Github上的,所以我们可以直接执行下面的命令来下载。

git clone https://github.com/flutter/flutter.git

或按照片面的步骤来下载Flutter。

注意:Flutter的下载路径要全英文并且路径不能有空格!

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

点击 Git GUI Here。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

点击 Clone Existing Repository

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

设置好 Source (https://github.com/flutter/flutter.git)和 Target 目录。点击 Clone 开始获取。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

等待下载完成。

注意: 

直接下载超慢,而且不停掉线,舍不得买代理*的童鞋,请配置镜像服务器地址,查看官方说明:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

这俩命令只支持mac和linux,在windows下加两个环境变量:

PUB_HOSTED_URL  https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL  https://storage.flutter-io.cn

完成后,关闭Git,开始配置环境变量。

在Windows系统环境变量中,将Flutter的路径加入。完成后如图所示。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

安装 Flutter

打开 Cmd 或 PowerShell (管理员方式),输入以下命令:

flutter doctor

Flutter 就会自动配置安装。成功之后再次执行以上命令,会是这样:

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

注意:

确保环境变量Path中存在  %systemroot%\System32; 

确保将 Git 的 Cmd 路径加入 Path。

7. 在 Android Studio 中配置 Flutter

打开 Android Studio。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

点击 Settings 打开设置界面。

设置文件编码,防止乱码

进入 Editor -> FileEncodings 中,将 Encoding 全部设为 UTF-8, 保持一致,点击 Apply。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

下载安装Flutter插件

进入 Plugins ,点击 Browse repositories...

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

搜索 Flutter , 找到后点击右边的 Install 按钮,安装 Flutter IDE 插件。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

点击 Yes, 开始下载安装。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

完成后,再搜索一下 Dart ,看是否已经安装,如果没有安装,同上一样点击 Install 下载安装。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

将 Flutter 和 Dart 插件都安装完成后,点击确定关闭设置界面,重新启动 Android Studio。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

如图所示,欢迎界面多出了 Start a new Flutter project 。Flutter 配置完成。

8. 第一个 Flutter Project

在 Android Studio中,点击 Start a new Flutter project 来开始一个 Flutter 工程。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

默认会选中 Flutter Application,用来创建app。后面是创建插件和Package。一开始,我们就创建一个空的Flutter APP 工程就行了。

点击next,进入下一步。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

在这一步,设置好工程名称,保存位置和描述信息,再次 Next。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

在这里设置App的包名,然后点击 Finish ,向导完成。

Android studio会根据我们的配置,来初始化Flutter工程。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

这里候,我们可以接上自己的手机,或者打开Android模拟器,然后选择该设备。

我们可以通过点击菜单中 Tools -> Android -> AVD Manager 来管理Android 模拟器。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

这里可以修改CPU类型,比如修改CPU为arm64

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

点击图上箭头所指的 Change 按钮,修改 Android SDK.

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)

在 Other Images 选项卡中选择一个版本(我选择最新的,但还没下载,所以要点击 Download 下载回来)

Flutter 支持 Android 4.1(及以后)和 iOS 8.0 及以后的版本。

选择好后点击OK就可以了。

然后我们可以打开这个模拟器。启动好后,它会出来在IDE右上角的设备选择框中,选择后就可以用了。

选择好设备后,我们可以直接点击 Run [Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)图标来构建和运行我们的第一个Flutter APK了。

[Flutter] Windows平台Flutter开发环境搭建(Andorid Studio)