windows10下Flutter开发环境配置(保姆级)

2,646 阅读4分钟

配置flutter环境需要配置 JavaSDK, FLutterSDK, AndroidSDK, Android Studio

1.配置Java SDK

1.1下载javaSDK

下载地址:www.oracle.com/java/techno…

根据自己想要的版本进行下载,我下的是java17的压缩包。 Snipaste_2021-12-30_11-21-12.png

1.2配置Java的环境变量

把下载下来的压缩包进行解压,放到你的想要的目录下然后打开环境变量进行配置,点击我的电脑右键->属性 进入下面的界面点击高级系统设置如图一步步设置

第一步添加系统变量

image.png

第二步配置环境变量

image.png

1.3检查环境变量是否配置成功

按【windows键】+【R】键,打开运行框,在运行框中输入【cmd】,弹出终端输入java --version就会输出版本信息这样的java的环境变量就配置完成了

image.png

2.配置Flutter SDK

2.1下载Flutter SDK

下载地址:docs.flutter.dev/development…

image.png

2.2配置Flutter的环境变量

2.2.1配置Flutter镜像地址

根据flutter中文网镜像地址配置到用户环境变量中

image.png 要配置两个镜像地址如下图配置

image.png

image.png

2.2.2配置环境变量

把下载下来的压缩包进行解压,放到你的想要的目录下然后打开环境变量进行配置,点击我的电脑右键->属性 进入下面的界面点击高级系统设置如图一步步设置

image.png

2.2.3检查环境变量是否配置成功

按【windows键】+【R】键,打开运行框,在运行框中输入【cmd】,弹出终端输入flutter --version就会输出版本信息这样的flutter的环境变量就配置完成了

image.png

2.2.4输入flutter doctor命令看下还要配置什么

按【windows键】+【R】键,打开运行框,在运行框中输入【cmd】,弹出终端输入flutter doctor就会输出信息

第一行√号 表示Flutter环境安装成功

X号 表示Android SDK还未安装 ()

!号 表示 Android Studio 还有未安装 和 没有挂载调试设备(虚拟机)

image.png

到目前为止已经完成了 Java,Flutter的环境变量配置接下来就是配置安卓的SDK和Android Studio了

3.配置Android Studio

3.1下载Android Studio

下载地址:developer.android.google.cn/studio/

image.png

3.2安装Android Studio

下载完成后就是双击打开安装了

image.png

image.png

image.png

image.png

image.png

这下Android Studio就安装完成了

3.3配置Android Studio

image.png

image.png

image.png

image.png

image.png

image.png

Snipaste_2021-12-30_17-50-00.png

Snipaste_2021-12-30_17-51-23.png

Snipaste_2021-12-30_17-52-01.png

3.4解决flutter doctor的问题

到这里android studio就都安装完成了,接下来在输入flutter doctor命令看下还缺什么

flutter doctor后之前Android Studio没安装的!符号已经没有了还有两个X号的报错 第一个问题:没有安装toole工具的报错

image.png

第二个问题:需要同意安卓的一些协议 命令就是后面的Flutter doctor -android-licenses

image.png

3.4.1解决flutter doctor的问题

我们先来解决第一个问题接下打开我们安装好的Android studio来安装toole工具

image.png

image.png

接下来我们在来flutter doctor检查一下看下关于toole工具的报错解决了没

image.png

现在就剩之前同意安卓的一些协议的问题了,接下来在终端输入Flutter doctor -android-licenses这个命令flutter的提示里面就有

image.png

谷歌的协议 一直Y同意协议。把协议都同意完后在输入flutter doctor看下

image.png

现在都是打钩的符号了就说明flutter的环境都配置好了。接下来让我们来跑第一个flutter项目吧

4.创建第一个flutte项目和安装手机模拟器

4.1创建第一个flutte项目

因为之前我们已经安装了flutter和Dart的插件现在打开Android Studio的欢迎界面就有创建flutter项目的图标了

image.png

image.png

image.png

然后点击finsh创建你的flutter项目吧,项目建好了接下来就是让他跑起来了

4.2安装手机模拟器

点击 Android Studio上面的tools

image.png

出现这个界面说明我们还没有模拟器

image.png

击中间这个 创建一个模拟器 选择手机型号 我选的是Pixel5点击Next

image.png

选择操作系统 一般安装最新的安卓版本,选好系统后点击Next

image.png

然后进入模拟器信息页面,直接点Finish就可以了

image.png

点击完finish 就到了已有虚拟机列表 点击三角号运行

image.png

第一运行可能比较慢,这样模拟器就算跑起来了

image.png

模拟器运行起来后 Android Studio上面就会显示当前你跑的模拟器

image.png

4.3运行flutter项目

4.3.1 解决Gradle卡住问题

当Flutter项目首次运行时,你会发现卡住不动了(如果没卡住,那跳过2.7),原因是Gradle的Maven仓库在国外。你懂的(当然,如果你有梯子,那当我没说)

image.png

4.3.1.1修改项目下的build.gradle文件
  • 文件路径:项目 --> Android --> build.gradle 文件
  • 修改内容:找到buildscript和allprojects将里面的
    google() 
    mavenCentral()

改为

maven{url'https://maven.aliyun.com/repository/google'}
maven{url'https://maven.aliyun.com/repository/jcenter'} 
maven{url'http://maven.aliyun.com/nexus/content/groups/public'}

如下图

image.png

4.3.1.2修改Flutter安装目录中的flutter.gradle文件
  • 文件路径:你安装flutter的目录\flutter\packages\flutter_tools\gradle\flutter.gradle

image.png

把内容修改成阿里镜像地址

image.png

4.3.2使用android studio 运行flutter项目

点击 Android Studio上面的绿色三角形

image.png

image.png

4.3.3使用flutter run运行flutter项目

使用命令行运行flutter run命令要是没有连接真机,要先在android studio中把模拟器打开 然后在命令行里进入flutter项目路径下运行命令

image.png