flutter(01) windows桌面版 编译环境安装指南

1 flutter环境安装

flutter官网参考:Install | Flutter

先下载flutter SDK=>:flutter sdk下载--官网,之后解压到C:\Users\XXX\data(这里以该路径为例,但可以为其他自定义路径)目录下,在这里主要是为了能够使用flutter相关命令,因此需要配置windows环境变量:将路径 C:\Users\XXX\data\ flutter\bin 加到windows 环境变量中。之后执行以下内容:

bash 复制代码
#flutter基础设置
flutter config --enable-windows-desktop
flutter --disable-telemetry

查看flutter支持情况,执行:

bash 复制代码
$flutter doctor -v

这里需要等待一会儿才输出:

bash 复制代码
C:\Users\XXX>flutter doctor -v
[√] Flutter (Channel stable, 3.10.1, on Microsoft Windows [版本 10.0.19044.2965], locale zh-CN)
    • Flutter version 3.10.1 on channel stable at C:\Users\Iris\data\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d3d8effc68 (30 hours ago), 2023-05-16 17:59:05 -0700
    • Engine revision b4fb11214d
    • Dart version 3.0.1
    • DevTools version 2.23.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[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.


[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.

[!] Visual Studio - develop for Windows (Visual Studio Community 2022 17.6.0)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.6.33712.159
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++"
      workload, and include these components:
        MSVC v142 - VS 2019 C++ x64/x86 build tools
         - If there are multiple build tool versions available, install the latest
        C++ CMake tools for Windows
        Windows 10 SDK

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19044.2965]
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 113.0.1774.42

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 4 categories.

查看flutter支持的设备,有windows即可

bash 复制代码
C:\Users\XXX>flutter devices
3 connected devices:

Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19044.2965]
Chrome (web)      • chrome  • web-javascript • Google Chrome 113.0.5672.127
Edge (web)        • edge    • web-javascript • Microsoft Edge 113.0.1774.42

至此整个环境安装的 核心就完成了,此时就可以使用flutter命令行来构建整个APP了.

2 flutter构建最简单的默认项目

创建一个项目winfun,默认会生成一大堆文件,执行命令如下:

bash 复制代码
flutter create winfun

dir查看项目文件:

bash 复制代码
2023/05/18  15:20    <DIR>          .
2023/05/18  15:20    <DIR>          ..
2023/05/18  15:20    <DIR>          .dart_tool
2023/05/18  15:19               745 .gitignore
2023/05/18  15:19    <DIR>          .idea
2023/05/18  15:19             1,668 .metadata
2023/05/18  15:19             1,482 analysis_options.yaml
2023/05/18  15:19    <DIR>          android
2023/05/18  15:19    <DIR>          ios
2023/05/18  15:19    <DIR>          lib
2023/05/18  15:19    <DIR>          linux
2023/05/18  15:19    <DIR>          macos
2023/05/18  15:20             5,266 pubspec.lock
2023/05/18  15:19             3,959 pubspec.yaml
2023/05/18  15:19               565 README.md
2023/05/18  15:19    <DIR>          test
2023/05/18  15:19    <DIR>          web
2023/05/18  15:19    <DIR>          windows
2023/05/18  15:19               859 winfun.iml

因为是windows平台,这里我们直接进入到windows目录下执行命令

bash 复制代码
flutter run -d window

运行后可以得到一个空白界面,是一个计数器,如下所示:

3 flutter在VScode中配置

添加插件Flutter即可,如下所示:

其他Flutter相关插件根据需要自己加就可以了。这样就可以直接在VSCode中直接编写和编译Flutter工程了。

4 VSCode中编写和编译代码

创建工程只需要执行

bash 复制代码
flutter create [项目名称] --platform=windows

即可。使用VSCode直接进入到目录下进行编辑,编写完代码直接在 当前目录下打开终端,执行

bash 复制代码
flutter run -d windows

即可。这样一个简单的开发换就完成了。

相关推荐
kirk_wang9 小时前
Flutter调用HarmonyOS NEXT原生相机拍摄&相册选择照片视频
flutter·华为·harmonyos
sunly_12 小时前
Flutter:carousel_slider 横向轮播图、垂直轮播公告栏实现
flutter
星释13 小时前
鸿蒙Flutter实战:17-无痛上架审核指南
flutter·华为·harmonyos
lichong95119 小时前
【Flutter&Dart】MVVM(Model-View-ViewModel)架构模式例子-http版本(30 /100)
android·flutter·http·架构·postman·win·smartapi
GY-9320 小时前
Flutter中PlatformView在鸿蒙中的使用
flutter·harmonyos
allanGold21 小时前
【Flutter】platform_view之AppKitView在哪个flutter版本添加的
flutter
sunly_1 天前
Flutter:进步器,数量加减简单使用
flutter
酱子姐1 天前
Flutter 架构原理
flutter
Callback_heaven1 天前
Flutter+vsCode 安装问题记录
ide·vscode·flutter
@福者2 天前
2025 最新flutter面试总结
flutter·面试·职场和发展