Windows系统中Visual Studio Code开发Flutter

周成风

已于 2022-06-06 14:34:38 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： flutter android windows

于 2022-05-31 14:29:50 首次发布

本文链接：https://blog.youkuaiyun.com/alicehyxx/article/details/124969664

Flutter 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Windows系统中使用Visual Studio Code(VSCode)进行Flutter应用开发的步骤，包括新建工程、运行方式以及工程结构。讲解了Flutter的三种工程类型：Application、Module和Package/Plugin，并指导如何通过快捷键F5在手机或Web上运行项目。同时，提到了Android虚拟设备的设置方法。此外，还分享了一些常用的VSCode快捷键，帮助提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Windows系统中Visual Studio Code开发Flutter

新建工程

1、运行VS Code后，使用快捷键Ctrl + Shift + P，输入命令flutter，将出现三个选项：

Flutter: Run Flutter Doctor，检查flutter的运行环境
Flutter: New Project，新建工程
Flutter: Run Flutter Upgrade，检查flutter新版本

2、选择flutter New Project，选择创建的工程类型Application
Flutter工程类型

Application：标准的Flutter App工程，包含标准的Dart层与Native平台层
Module：混编到已有的安卓/iOS工程的模块
Package：Flutter纯Dart插件工程，仅包含Dart层的实现，往往定义一些公共Widget
Plugin：Flutter平台插件工程，包含Dart层与Native平台层的实现。一个特殊的Package。Flutter Plugin提供Android或者iOS的底层封装，在Flutter层提供组件功能，使Flutter可以较方便的调取Native的模块。很多平台相关性或者对于Flutter实现起来比较复杂的部分，都可以封装成Plugin

3、按快捷键F5运行工程，Flutter2.5.3新建的工程将以Web方式运行工程
运行结果
4、想使用手机运行Flutter程序，以Android为例，打开Android Studio，顶部菜单Tools，打开AVD Manager，添加一个新的虚拟设备，点击Actions下的运行按钮运行。设备运行后，再次通过快捷键F5运行，将在手机上运行Flutter程序（第一次运行较慢，将自动配置环境）
PS：虚拟机占用较多的磁盘空间（10G左右），默认位置一般在C:\Users\用户名.android\avd。若需要修改，仅需添加环境变量ANDROID_SDK_HOME，如D:\AndroidStudioAvd，虚拟机将放到D盘。
虚拟设备列表

工程结构

lib目录，默认main.dart是入口文件，该目录存放代码

快捷键汇总

显示所有命令：Ctrl + Shift + P
转到文件：Ctrl + P
在文件中查找：Ctrl + Shift + F
开始调试：F5
切换终端：Ctrl + `
statelesswidget转为statefulwidget：点击vs code左下角的齿轮，选择keyboard shortcuts，输入refactor，第一个选项就是refactor的快捷键了。或者选中statelesswidget，按Ctrl + Shift + R，选择Convert to StatefulWidget