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

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

相关推荐
奋斗的小青年!!2 小时前
Flutter浮动按钮在OpenHarmony平台的实践经验
flutter·harmonyos·鸿蒙
程序员老刘5 小时前
一杯奶茶钱,PicGo + 阿里云 OSS 搭建永久稳定的个人图床
flutter·markdown
奋斗的小青年!!9 小时前
OpenHarmony Flutter 拖拽排序组件性能优化与跨平台适配指南
flutter·harmonyos·鸿蒙
小雨下雨的雨10 小时前
Flutter 框架跨平台鸿蒙开发 —— Stack 控件之三维层叠艺术
flutter·华为·harmonyos
行者9611 小时前
OpenHarmony平台Flutter手风琴菜单组件的跨平台适配实践
flutter·harmonyos·鸿蒙
小雨下雨的雨12 小时前
Flutter 框架跨平台鸿蒙开发 —— Flex 控件之响应式弹性布局
flutter·ui·华为·harmonyos·鸿蒙系统
cn_mengbei12 小时前
Flutter for OpenHarmony 实战:CheckboxListTile 复选框列表项详解
flutter
cn_mengbei13 小时前
Flutter for OpenHarmony 实战:Switch 开关按钮详解
flutter
奋斗的小青年!!13 小时前
OpenHarmony Flutter实战:打造高性能订单确认流程步骤条
flutter·harmonyos·鸿蒙
Coder_Boy_13 小时前
Flutter基础介绍-跨平台移动应用开发框架
spring boot·flutter