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

2024-03-20 05:12

本文主要是介绍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 devicesX Unable to locate Android SDK.Install Android Studio from: https://developer.android.com/studio/index.htmlOn 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 appsX 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 resourcesX A cryptographic error occurred while checking "https://storage.googleapis.com/": Connection terminated during handshakeYou 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

这篇关于Flutter 在 Windows 下的开发环境搭建(Flutter SDK 3.19.2)【图文详细教程】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/828387

相关文章

Spring Cloud GateWay搭建全过程

《SpringCloudGateWay搭建全过程》:本文主要介绍SpringCloudGateWay搭建全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Spring Cloud GateWay搭建1.搭建注册中心1.1添加依赖1.2 配置文件及启动类1.3 测

C#实现访问远程硬盘的图文教程

《C#实现访问远程硬盘的图文教程》在现实场景中,我们经常用到远程桌面功能,而在某些场景下,我们需要使用类似的远程硬盘功能,这样能非常方便地操作对方电脑磁盘的目录、以及传送文件,这次我们将给出一个完整的... 目录引言一. 远程硬盘功能展示二. 远程硬盘代码实现1. 底层业务通信实现2. UI 实现三. De

自研四振子全向增益天线! 中兴问天BE6800Pro+路由器拆机和详细评测

《自研四振子全向增益天线!中兴问天BE6800Pro+路由器拆机和详细评测》中兴问天BE6800Pro+路由器已经上市,新品配备自研四振子全向增益天线,售价399元,国补到手339.15元,下面我们... 中兴问天BE6800Pro+路由器自上市以来,凭借其“旗舰性能,中端价格”的定位,以及搭载三颗自研芯片

ubuntu20.0.4系统中安装Anaconda的超详细图文教程

《ubuntu20.0.4系统中安装Anaconda的超详细图文教程》:本文主要介绍了在Ubuntu系统中如何下载和安装Anaconda,提供了两种方法,详细内容请阅读本文,希望能对你有所帮助... 本文介绍了在Ubuntu系统中如何下载和安装Anaconda。提供了两种方法,包括通过网页手动下载和使用wg

SpringBoot实现二维码生成的详细步骤与完整代码

《SpringBoot实现二维码生成的详细步骤与完整代码》如今,二维码的应用场景非常广泛,从支付到信息分享,二维码都扮演着重要角色,SpringBoot是一个非常流行的Java基于Spring框架的微... 目录一、环境搭建二、创建 Spring Boot 项目三、引入二维码生成依赖四、编写二维码生成代码五

如何在Ubuntu上安装NVIDIA显卡驱动? Ubuntu安装英伟达显卡驱动教程

《如何在Ubuntu上安装NVIDIA显卡驱动?Ubuntu安装英伟达显卡驱动教程》Windows系统不同,Linux系统通常不会自动安装专有显卡驱动,今天我们就来看看Ubuntu系统安装英伟达显卡... 对于使用NVIDIA显卡的Ubuntu用户来说,正确安装显卡驱动是获得最佳图形性能的关键。与Windo

SpringBoot快速搭建TCP服务端和客户端全过程

《SpringBoot快速搭建TCP服务端和客户端全过程》:本文主要介绍SpringBoot快速搭建TCP服务端和客户端全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录TCPServerTCPClient总结由于工作需要,研究了SpringBoot搭建TCP通信的过程

Java中 instanceof 的用法详细介绍

《Java中instanceof的用法详细介绍》在Java中,instanceof是一个二元运算符(类型比较操作符),用于检查一个对象是否是某个特定类、接口的实例,或者是否是其子类的实例,这篇文章... 目录引言基本语法基本作用1. 检查对象是否是指定类的实例2. 检查对象是否是子类的实例3. 检查对象是否

IDEA之MyBatisX使用的图文步骤

《IDEA之MyBatisX使用的图文步骤》本文主要介绍了IDEA之MyBatisX使用,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录一、idea插件安装二、IDEA配置数据库连接(以mysql为例)三、生产基础代码一、idea插

将图片导入Python的turtle库的详细过程

《将图片导入Python的turtle库的详细过程》在Python编程的世界里,turtle库以其简单易用、图形化交互的特点,深受初学者喜爱,随着项目的复杂度增加,仅仅依靠线条和颜色来绘制图形可能已经... 目录开篇引言正文剖析1. 理解基础:Turtle库的工作原理2. 图片格式与支持3. 实现步骤详解第