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

Git 下载与安装

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

Git 下载:

对于 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

Flutter可以用来开发跨平台的移动应用和Web应用程序,但也可以用于开发桌面应用程序,包括Windows应用程序。Flutter Desktop是Flutter的一个实验性分支,可以用于构建Windows、macOS和Linux上的本地应用程序。下面是在Windows搭建Flutter Desktop环境并开始开发Windows应用程序的步骤: 1. 安装Flutter SDK:首先,您需要安装Flutter SDK。您可以从Flutter官方网站(https://flutter.dev/docs/get-started/install/windows)下载Flutter SDK并按照指示进行安装。 2. 安装Visual Studio Code:您需要安装Visual Studio Code(VS Code),这是一个轻量级的代码编辑器,非常适合Flutter开发。 3. 安装FlutterDart插件:在VS Code中,您需要安装FlutterDart插件。打开VS Code并按下Ctrl+Shift+X,搜索FlutterDart插件,然后单击“安装”按钮。 4. 安装Flutter Desktop工具包:Flutter Desktop需要一些额外的工具和库来构建本地应用程序。您可以从https://github.com/google/flutter-desktop-embedding/releases下载Flutter Desktop工具包,并将其解压缩到任何位置。 5. 配置环境变量:打开系统环境变量设置,并将FlutterDart的bin目录添加到PATH变量中。例如,如果您将FlutterDart安装在C:\flutter和C:\dart中,则应将C:\flutter\bin和C:\dart\bin添加到PATH变量中。 6. 创建Flutter应用程序:现在,您可以使用VS Code创建Flutter应用程序。打开VS Code,单击“文件”>“新建文件夹”,然后为您的应用程序选择一个位置。然后,按下Ctrl+Shift+P,搜索“Flutter”,并选择“Flutter: New Project”。按照指示创建Flutter应用程序。 7. 集成Flutter Desktop:现在,您需要将Flutter Desktop添加到您的Flutter应用程序中。在您的Flutter应用程序根目录下,打开pubspec.yaml文件,并添加以下依赖项: ``` dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter desktop_window: ^0.5.1 path_provider: ^1.6.11 sqflite: ^1.3.2+1 path: ^1.7.0 ``` 然后,运行以下命令,从Flutter Desktop工具包中获取所需的文件: ``` flutter packages get flutter packages pub run build_runner build --delete-conflicting-outputs ``` 8. 运行应用程序:现在,您可以运行您的Flutter应用程序。打开终端并导航到您的应用程序根目录,然后运行以下命令: ``` flutter run -d windows ``` 这将启动您的Flutter应用程序,并在Windows上运行。这是使用FlutterWindows上开发应用程序的基本步骤。但是,需要注意的是,Flutter Desktop还处于实验阶段,可能存在一些问题和限制。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值