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
即可。这样一个简单的开发换就完成了。