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

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

相关推荐
李李李勃谦5 分钟前
Flutter 框架跨平台鸿蒙开发 - 星空识别助手
flutter·华为·harmonyos
李李李勃谦10 分钟前
Flutter 框架跨平台鸿蒙开发 - 本地生活服务预约
flutter·华为·生活·harmonyos
2301_8227032029 分钟前
开源鸿蒙跨平台Flutter开发:幼儿疫苗全生命周期追踪系统:基于 Flutter 的免疫接种档案与状态机设计
算法·flutter·华为·开源·harmonyos·鸿蒙
2301_822703201 小时前
鸿蒙flutter三方库实战——教育与学习平台:Flutter Markdown
学习·算法·flutter·华为·harmonyos·鸿蒙
2301_822703204 小时前
开源鸿蒙跨平台Flutter开发:蛋白质序列特征提取:氨基酸组成与理化性质计算
flutter·华为·开源·harmonyos·鸿蒙
钛态4 小时前
Flutter 三方库 ethereum_addresses 的鸿蒙化适配指南 - 掌控区块链地址资产、精密校验治理实战、鸿蒙级 Web3 专家
flutter·harmonyos·鸿蒙·openharmony·ethereum_addresses
提子拌饭1334 小时前
开源鸿蒙跨平台Flutter开发:中小学百米跑信息记录表:基于 Flutter 的高精计时与运动学曲线引擎
flutter·华为·开源·harmonyos
SY.ZHOU4 小时前
移动端架构体系(四):View层的组织与调用方案
flutter·ios·架构·系统架构·安卓
2301_822703204 小时前
光影进度条:鸿蒙Flutter实现动态光影效果的进度条
算法·flutter·华为·信息可视化·开源·harmonyos
独特的螺狮粉5 小时前
城市空气质量简易指数查询卡片:鸿蒙Flutter框架 实现的空气质量查询应用
开发语言·flutter·华为·架构·harmonyos