基于win10 系统下的Flutter环境搭建

479 阅读2分钟

前言

本次环境搭建基于win10,开发工具使用adnroid studio

使用其他开发工具(eg:vscode)的道友可以忽略本文,点击链接进入自选工具教程。

flutter 相关网站

Flutter中文社区
Flutter官网
Flutter GitHub

软件准备

JDK17
flutter3.19.6
android studio

JDK 环境配置

  1. 把JDK解压到一个没有空格和中文的目录下(eg:D:\soft\jdk1705)
  2. 配置JDK环境变量 【2.1/2.2二选一操作即可

2.1 通过 控制面板\系统和安全\系统\高级系统设置\高级\环境变量\系统变量 设置

2.1.1 点击[新建(W)] 变量名填写JAVA_HOME 变量值填写JDK解压路径(eg:D:\soft\jdk1705 )

2.1.2 配置JDK bin 路径;

找到系统变量中的Path

双击后点击新建把【%JAVA_HOME%\bin】复制在空白处后点击确定。

2.2 在cmd中执行如下命令设置

setx D:\soft\jdk1705 /m

setx Path %Path%;%JAVA_HOME%\bin /m

环境变量安装验证

在cmd 执行 java -version 如图所示则表示配置成功

image.png

ps: 如果出现 【'java'不是内部或外部命令,也不是可运行的程序】很大可能是JAVA_HOME 路径不对; 目录结构应如下图所示

image.png

flutter 环境配置

  1. 把flutter解压到一个没有空格和中文的目录下(eg:D:\soft\flutter)

  2. 配置flutter 环境变量(把{解压路径}/flutter/bin 配置在系统变量 path 中) image.png

  3. Flutter本地化配置(如果你有翻墙的环境可以忽略这一步骤)【3.1/3.2二选一操作即可

3.1 通过 控制面板\系统和安全\系统\高级系统设置\高级\环境变量\系统变量 设置

FLUTTER_STORAGE_BASE_URL=storage.flutter-io.cn

PUB_HOSTED_URL=pub.flutter-io.cn

3.2 在cmd 中执行如下命令设置

setx FLUTTER_STORAGE_BASE_URL storage.flutter-io.cn /m

setx PUB_HOSTED_URL pub.flutter-io.cn /m

flutter环境配置验证

在cmd 中执行 flutter doctor 命令如果结果如下图表示配置成功

image.png

flutter doctor 异常情况

异常现象

A network error occurred while checking "github.com/": 信号灯超时时间已到 maven.google.com/ 信号灯超时时间已到

解决方法

原因是中国无法有效访问github.com

参考 “Flutter本地化配置”

ps : flutter\packages\flutter_tools\lib\src\http_host_validator.dart 也可修改域名配置

异常现象

image.png

解决方法

1.1 cmdline-tooles component is miss 异常 安装Android SDK相关组件即可;执行命令或在android studio中安装(参考如下图as中安装) image.png 1.2 Android 1icense status unknowm.

执行 flutter doctor --android-licenses 命令 后一路y【参考如下图】 image.png

异常现象

image.png

解决方法

点击下载Visual Studio 社区版 安装时选择C++的桌面开发【如下图】 image.png

异常现象

VS Code (version 1.78.2) /Chrome-develop for the web 出现红X

解决方法

安装 VS Code

安装 Chrome

后记:

如果你碰到其他异常、或者文章有表述不清楚的地方,欢迎留言讨论。