Flutter 在 Windows 下的开发环境搭建(Flutter SDK 3.19.2)【图文详细教程】

Git 下载与安装

对于 Flutter 3.19,Git 版本需要 2.27 及以上

Git 下载:

  • Git 官网:https://git-scm.com/
  • Git 下载淘宝镜像:https://registry.npmmirror.com/binary.html?path=git-for-windows/

对于 Git 的安装教程,可以参考 https://blog.csdn.net/mukes/article/details/115693833,该文章中写的是真的详细

Flutter SDK 下载

在 https://flutter.cn/docs/get-started/install/windows/mobile?tab=download#install-the-flutter-sdk 中下载 Flutter SDK 稳定版本的压缩包
image.png

Flutter SDK 的安装

在电脑中选择合适的位置对下载的压缩包进行解压,把压缩包的 flutter 目录解压出来,解压完成即安装完成

我习惯对 SDK 的根目录添加 SDK 的版本,以便不同版本的区分

image.png

在系统环境变量中配置 Flutter 相关的环境变量

我的电脑=>鼠标右键=>属性=>高级系统设置=>环境变量=>系统变量=>Path=>新建

将 FLutter SDK 中 bin 目录添加到系统环境变量中,以便其中的可执行文件在任何位置都可以执行

  • flutter.bat:执行 flutter 相关命令
  • dart.bat:执行 dart 相关命令

image.png

检查 Flutter 所需的开发环境是否配置完整

在系统环境变量中配置完成 Flutter 相关的环境变量后,我们就可以在命令行终端中使用如下命令检查 Flutter 所需的环境是否完整

如果出现执行如下命令长时间未响应,可以参考 https://www.yuque.com/u27599042/rwe4wi/sncif8ep6ecws0sc 进行解决

flutter doctor

image.png

安装 Android Studio (解决 Android Studio (not installed) 与 Android toolchain - develop for Android devices Unable to locate Android SDK.)

[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[!] Android Studio (not installed)

对于 Android Studio 的安装,可以参考 https://www.yuque.com/u27599042/hifn96/qeq6hga4rw86mf4y
在 Android Studio 安装完成之后,进入 Android Studio 的设置界面,选择 Languages&Frameworks,然后选择 Android SDK,在该设置项中可以下载其他版本的 Android SDK 和 SDK Tools,然后选择 SDK Tools,勾选 Android SDK Command-line Tools (latest)
image.png
然后点击 Apply,由于本地没有 Android SDK Command-line Tools (latest),需要下载,点击 OK
image.png
image.png
下载完成后点击 finish,然后点击 OK 确定设置修改并退出设置界面,运行 flutter doctor

如果你在安装 Android Studio 时,修改了 SDK 的存放位置,仍然会报错 Android toolchain - develop for Android devices Unable to locate Android SDK.,因为 Flutter 并不知道修改了 SDK 存放位置后 Android SDK Command-line Tools (latest) 在哪,可以参考 https://www.yuque.com/u27599042/rwe4wi/qxoh07f978md9kqr

image.png

同意 Android 许可协议

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

我们在安装 Android Studio,并下载 Android SDK Command-line Tools (latest) 后,还需要执行如下命令,同意 Android 许可协议

flutter doctor --android-licenses

然后一路输入 y 同意协议即可
image.png
image.png

安装谷歌浏览器 (解决 Cannot find Chrome)

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

谷歌浏览器的下载地址:https://www.google.cn/chrome/index.html

谷歌浏览器的安装,这里不进行赘述

image.png
image.png

安装 Visual Studio (解决 Visual Studio not installed)

[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

Visual Studio 下载地址:https://visualstudio.microsoft.com/downloads/

社区版够用

image.png
image.png
下载安装完成之后,在工作负荷界面勾选使用 C++ 的桌面开发
image.png
然后在安装位置界面,根据需要选择是否修改 IDE、缓存、SDK 的存放路径
image.png
取消勾选安装后保留下载缓存,然后点击安装

这个过程会挺漫长

image.png
下载安装完成,点击确定
image.png
运行 flutter doctor
image.png

在系统环境变量中添加配置 storage 的国内镜像源(解决 A cryptographic error occurred while checking “https://storage.googleapis.com/”: Connection terminated during handshake)

[!] Network resources
    X A cryptographic error occurred while checking "https://storage.googleapis.com/": Connection terminated during handshake
      You may be experiencing a man-in-the-middle attack, your network may be compromised, or you may have malware installed on your computer.

在系统环境变量中添加 FLUTTER_STORAGE_BASE_URL 环境变量,配置 Flutter 需要访问 https://storage.googleapis.com/ 的国内镜像

FLUTTER_STORAGE_BASE_URL  设置为  https://storage.flutter-io.cn

image.png
关闭重开命令行窗口,运行 flutter doctor

这里 X Anetwork error occurredwhilechecking"https://maven.google.com/":信号灯超时时间已到 报错不见了,是由于 https://maven.google.com/ 这个时候可以访问到了,但是为了防止后面出现此报错,所以还是选择将 Flutter 访问的 maven 地址替换为国内镜像

image.png

配置 Flutter 使用的 maven 国内镜像(解决 X Anetwork error occurredwhilechecking"https://maven.google.com/":信号灯超时时间已到)

X Anetwork error occurredwhilechecking"https://maven.google.com/":信号灯超时时间已到

在 flutter3.19.2\packages\flutter_tools\lib\src 下的 http_host_validator.dart 文件中,找到 const String kMaven = 'https://maven.google.com/';,将 Flutter SDK 使用的 maven 镜像修改为国内镜像

const String kMaven = 'https://maven.aliyun.com/repository/google/';

image.png
运行 flutter doctor
image.png

此时 Flutter 的开发环境搭建完成,接下来创建并运行 Flutter 项目进行测试

创建 Flutter 项目

自行选择 Flutter 项目的存放位置,选择好项目的存放位置后,在命令行窗口中运行如下命令创建 Flutter 项目

Flutter 创建项目时使用的项目名之间不能使用 - 分割单词,要使用 _

flutter create <项目名>
flutter create first_flutter_project

image.png

运行 Flutter 项目

Flutter 项目创建完成后,进入项目根目录

cd <项目名>

然后打开 Android Studio 启动 Android 虚拟设备
image.png

没有 Android 虚拟设备的,点击左上角的加号创建一个即可,Android Studio 创建 Android 虚拟设备可以参考 https://www.yuque.com/u27599042/hifn96/ky9gfust1ikvb2kg

image.png
虚拟设备启动运行情况说明
image.png

第一次启动 Android 虚拟设备会比较慢

image.png
然后再 Flutter 项目根目录中运行如下命令,启动运行 Flutter 项目

如果一直卡在 Running Gradle task ‘assembleDebug’,解决方法可以参考 https://www.yuque.com/u27599042/rwe4wi/ozui5zabcpqucvz0,一直卡在 Running Gradle task ‘assembleDebug’,正在进行资源的下载,可能是由于 Gradle 构建项目时访问的 maven 镜像是国外的导致的
这里我由于一直卡在 Running Gradle task ‘assembleDebug’,就配置了 https://www.yuque.com/u27599042/rwe4wi/ozui5zabcpqucvz0 中的第五个配置操作,然后重新运行 flutter run 等一会就没有一直一直卡在 Running Gradle task ‘assembleDebug’
image.png
如果仍然不行,可以尝试把 https://www.yuque.com/u27599042/rwe4wi/ozui5zabcpqucvz0 中没有进行的配置操作配置一下试试看

flutter run

image.png

至此,成功,nice

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/470728.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot+vue的游戏交易系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

目标检测——PP-PicoDet算法解读

PP-YOLO系列&#xff0c;均是基于百度自研PaddlePaddle深度学习框架发布的算法&#xff0c;2020年基于YOLOv3改进发布PP-YOLO&#xff0c;2021年发布PP-YOLOv2和移动端检测算法PP-PicoDet&#xff0c;2022年发布PP-YOLOE和PP-YOLOE-R。由于均是一个系列&#xff0c;所以放一起解…

嵌入式学习41-数据结构2

今天学习了链表的增删改查 &#xff08;暂定&#xff01;&#xff01;后续再补内容&#xff09; 高内聚 &#xff1a;一个函数只实现一个功能 …

klipper源码分析之simulavr测试

分析Klipper源码&#xff0c;有时需要结合下位机一起分析&#xff0c;这样才能更加全面的了解Klipper的工作原理。如果手头上有打印机主板&#xff0c;电脑当做上位机运行Klipper&#xff0c;这样是比较方便。如果手头上没有打印机主板&#xff0c;可以用simulavr模拟AVR下位机…

ECharts绘制盒须图

一、箱线图 反应一组数据的分布情况&#xff0c;通过四分位数以图形的方式展示数值数据的局限性、分布和偏度组的方法。 四分位数&#xff1a;即把所有数值由小到大排列并分成四等份&#xff0c;处于三个分割点的数值就是四分位数。 下四分位&#xff1a;第一四分位Q1&#…

Android TransactionTooLargeException排查定位

Android TransactionTooLargeException排查定位 工具&#xff1a; https://github.com/guardian/toolargetoolhttps://github.com/guardian/toolargetool android TransactionTooLargeException问题的修复&#xff0c;一种简单的修复就是在Fragment的onCreate里面&#xff0…

Nginx实现原理全解析:构建高效Web服务器的关键

1、Nginx是什么 Nginx&#xff08;engine X&#xff09;是一个开源的轻量级的HTTP服务器&#xff0c;能够提供高性能的HTTP和反向代理服务。与传统的Apache服务器相比&#xff0c;在性能上Nginx占用系统资源更小、支持高并发&#xff0c;访问效率更高&#xff1b;在功能上&…

uniapp uni-file-picker @delete删除时候不知道删的是第几个,真坑,用着他的组件写着代码还得改着他的源码

正常删除触发事件中返回个文件地址那些东西 根本没什么用 因为这个项目是上传阿里云oss的&#xff0c;所以上传之后获取网络地址就可以给后端传参了&#xff0c;所以本地地址一点用没有&#xff0c;我只是想在删除的时候知道删了第几个就行。 于是、改源码吧 组件源码中找到这…

Ubuntu双系统/home分区扩容

一、Windows系统中利用磁盘管理分出空闲区域&#xff0c;如果多就多分一些 二、插入安装Ubuntu的U盘启动盘&#xff0c;lenovo电脑F12&#xff08;其他电脑可选择其他类似方式&#xff09;选择U盘启动项&#xff0c;然后选择ubuntu&#xff0c;出现安装界面&#xff0c;再选择t…

Basic RNN

文章目录 回顾RNNRNN CellRNNCell的使用RNN的使用 RNN例子使用RNN Cell实现使用RNN实现 嵌入层 Embedding独热向量的缺点Embedding LSTMGRU(门控循环单元)练习 回顾 DNN&#xff08;全连接&#xff09;&#xff1a;和CNN相比&#xff0c;拥有巨大的参数量&#xff0c;CNN权重共…

【Godot4.2】自定义简单的参数化2D网格节点

概述 在某些情况下我们可能需要在Godot中自定义2D网格&#xff0c;因为此时可能用TileMap会显得太“重”&#xff0c;因为我们可能只需要其作为网格的功能却不需要它的其他功能&#xff0c;比如绘制瓦片地图。而且我们可能需要在网格功能的基础上&#xff0c;添加更多自定义的…

服务器版本命令查看

1、# uname &#xff0d;a &#xff08;Linux查看版本当前操作系统内核信息&#xff09; 2、# cat /proc/version &#xff08;Linux查看当前操作系统版本信息&#xff09; 3、# cat /etc/issue 或 cat /etc/redhat-release &#xff08;Linux查看版本当前操作系统发行版信息&…

jmeter打开文件报异常无法打开

1、问题现象&#xff1a; 报错部分内容&#xff1a; java.desktop does not export sun.awt.shell to unnamed module 0x78047b92 [in thread "AWT-EventQueue-0"] 报错部分内容&#xff1a; kg.apc.jmeter.reporters.LoadosophiaUploaderGui java.lang.reflect.Invo…

MPI4.1文档2:MPI术语与MPI操作过程

第2章 MPI术语与约定 MPI Terms and Conventions 这一章节解释了MPI文档中使用的符号术语和惯例&#xff0c;以及其中所做的一些选择和背后的原因。 2.1 文档符号表示 Document Notation Rational. 在整个文档中&#xff0c;对界面规范中所做设计选择的理由以这个格式(首尾包…

Modbus TCP转Profinet网关如何实现Modbus主站与多设备通讯

在工业控制领域中&#xff0c;Modbus TCP转Profinet网关&#xff08;XD-ETHPN20&#xff09;扮演着连接不同设备间通讯的重要角色。当将Modbus主站与十几台服务器进行通讯时&#xff0c;通过modbus tcp转profinet网关&#xff08;XD-ETHPN20&#xff09;设备将不同协议间的数据…

LabVIEW NV色心频率扫描

LabVIEW NV色心频率扫描 通过LabVIEW软件开发一个能够实现对金刚石氮空位&#xff08;Nitrogen-Vacancy&#xff0c;NV&#xff09;色心的频率扫描系统。系统通过USB协议与硬件设备通信&#xff0c;对NV色心进行高精度的频率扫描&#xff0c;满足了频率在2.6 GHz到3.2 GHz范围…

python与excel第一节

python与excel第一节 由于excel在日常办公中大量使用&#xff0c;我们工作中常常会面对高频次或者大量数据的情况。使用python语言可以更加便捷的处理excel。 python与vba的比较 python语法更加简洁&#xff0c;相较于vba冗长复杂的语法&#xff0c;python更加容易学习。 p…

阅读笔记(CVPR2020)Warping Residual Based Image Stitching for Large Parallax

基于变形残差的大视差图像拼接 K. -Y. Lee and J. -Y. Sim, "Warping Residual Based Image Stitching for Large Parallax," 2020 IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), Seattle, WA, USA, 2020, pp. 8195-8203, doi: 10.1109/…

Grok-1:参数量最大的开源大语言模型

Grok-1&#xff1a;参数量最大的开源大语言模型 项目简介 由马斯克领衔的大型模型企业 xAI 正式公布了一项重要动作&#xff1a;开源了一个拥有 3140 亿参数的混合专家模型&#xff08;MoE&#xff09;「Grok-1」&#xff0c;连同其模型权重和网络架构一并公开。 此举将 Gro…

行业模板|DataEase制造行业大屏模板推荐

DataEase开源数据可视化分析平台于2022年6月发布模板市场&#xff08;https://templates-de.fit2cloud.com&#xff09;&#xff0c;并于2024年1月新增适用于DataEase v2版本的模板分类。模板市场旨在为DataEase用户提供专业、美观、拿来即用的大屏模板&#xff0c;方便用户根据…