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 环境变量中。之后执行以下内容：

#flutter基础设置
flutter config --enable-windows-desktop
flutter --disable-telemetry

查看flutter支持情况，执行：

$flutter doctor -v

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

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即可

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，默认会生成一大堆文件，执行命令如下：

flutter create winfun

dir查看项目文件：

2023/05/18  15:20              .
2023/05/18  15:20              ..
2023/05/18  15:20              .dart_tool
2023/05/18  15:19               745 .gitignore
2023/05/18  15:19              .idea
2023/05/18  15:19             1,668 .metadata
2023/05/18  15:19             1,482 analysis_options.yaml
2023/05/18  15:19              android
2023/05/18  15:19              ios
2023/05/18  15:19              lib
2023/05/18  15:19              linux
2023/05/18  15:19              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              test
2023/05/18  15:19              web
2023/05/18  15:19              windows
2023/05/18  15:19               859 winfun.iml

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

flutter run -d window

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

3 flutter在VScode中配置

添加插件Flutter即可，如下所示：

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

4 VSCode中编写和编译代码

创建工程只需要执行

flutter create [项目名称] --platform=windows

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

flutter run -d windows

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