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

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

相关推荐
2601_949970693 小时前
HumanizeDuration 跨端三方库仓颉适配全流程
前端·javascript·flutter
传奇开心果编程4 小时前
【Flutter踩坑排雷】第3课:const 误用坑|const 错误使用引发 UI 异常与性能损耗
flutter·移动开发·跨平台·dart·编程语言理论·编程框架·声明式ui
程序员老刘6 小时前
你的Flutter项目要不要紧急升级3.47.8?
flutter·客户端
Talyra428 小时前
不想开会员,我写了一个记账 App
flutter
2601_9495758613 小时前
JSON5 跨端三方库仓颉适配全流程
前端·javascript·flutter
法的空间13 小时前
AI 编程时代,为什么 Dart 分析会拖慢大型项目的开发
android·flutter·ios
恋猫de小郭15 小时前
Flutter 紧急发布 3.47.8 安全升级版本,建议都升级
android·前端·flutter
好的佩奇1 天前
Dart 之模式
android·flutter·dart
淡淡的香烟1 天前
Flutter实现多语言切换
android·flutter·1024程序员节
事圆则缓2 天前
从零搭建一套 Flutter 架构:先跑通数据流
flutter