Visual Studio Code使用Flutter开发第一个Web页面

news2024/11/13 9:52:48

1、新建Flutter项目

查看(View)-命令面板( Command Palette…
输入flutter 我的提示‘没有匹配的命令’
在这里插入图片描述

遇到这种情况的处理方法:

  • 打开 VS Code。

  • 打开 View > Command Palette… (查看 > 命令面板)。

  • 输入「install」,然后选择 Extensions: Install Extensions。

  • 在扩展搜索输入框中输入「flutter」,然后在列表中选择 Flutter 并单击 Install。此过程中会自动安装必需的 Dart 插件。

  • 点击 Reload to Activate 以重新启动 VS Code。(重启即可)

在这里插入图片描述
重启后再次执行

  • 打开 View > Command Palette (查看 > 命令面板)。

  • 输入「flutter」,选择 Flutter: New Project。

  • 选择 Application。

  • 新建或选择新项目将存放的上层目录。

  • 输入项目名称,例如 my_flutter_web,并点击 Enter。

  • 等待项目创建完成,并且 main.dart 文件展现在编辑器中。
    在这里插入图片描述
    在这里插入图片描述

2、运行

  • 定位到Visual Studio Code的状态栏(窗口底部蓝色框)选择需要运行的设备
    在这里插入图片描述
  • 运行 Run > Start Debugging 或按下 F5。(在 VS Code terminal 中运行命令: flutter run )
  • 等待应用启动——启动进度会在 Debug Console 中展示。
  • 在这里插入图片描述
    运行结果:
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1597480.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【VUE】Vue项目打包报告生成:让性能优化触手可及

Vue项目打包报告生成:让性能优化触手可及 Vue.js是一款流行的前端框架,开发者在使用Vue.js构建项目时,生产环境的性能优化尤为重要。为了帮助开发者分析和优化打包出来的资源,生成打包报告是一个不可或缺的步骤。本文将介绍几种在…

GD32F3系列单片机环境搭建STM32CubeMX版

GD32单片机介绍 使用到开发板 GD32F303C-START 芯片型号:GD32F303CGT6 PinToPin单片机型号:STM32F103 GD32F303CGT6是超低开发预算需求并持续释放Cortex-M4高性能内核的卓越动力,为取代及提升传统的8位和16位产品解决方案,直接进…

Linux Debian安装教程

Debian 是一个免费的开源操作系统,是最古老的 Linux 发行版之一,于 1993 年由 Ian Murdock 创建。它采用了自由软件协议,并且由志愿者社区维护和支持。Debian 的目标是创建一个稳定、安全且易于维护的操作系统,以自由软件为基础&a…

【C++】<入门>C++入门基础知识

C入门 1. 入门0. 本节知识点熟悉目的1. C关键字(C98) 2. 命名空间2.1 命名空间定义2.2 命名空间使用 3. C输入&输出4. 缺省参数4.1 缺省参数概念4.2 缺省参数分类 5. 函数重载5.1 函数重载概念5.2 C支持函数重载的原理--名字修饰(name Ma…

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十二 简单图片添加水印效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十二 简单图片添加水印效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之十二 简单图片添加水印效果 一、简单介绍 二、简单图片添加水印效果实现原理 三、简单图片添加水印效果案例…

自动驾驶时代的物联网与车载系统安全:挑战与应对策略

随着特斯拉CEO埃隆马斯克近日对未来出行景象的描绘——几乎所有汽车都将实现自动驾驶,这一愿景愈发接近现实。马斯克生动比喻,未来的乘客步入汽车就如同走进一部自动化的电梯,无需任何手动操作。这一转变预示着汽车行业正朝着高度智能化的方向…

排序(一)——插入排序 希尔排序

1.直接插入排序 直接插入排序是一种简单的插入排序,它的基本思想是: 把待排序的数据按其关键码值的大小逐个插入到一个已经排好序的有序序列中,直到所有的数据都插入完位置,就得到了一个新的有序序列。 我们可以看到他的前提是…

部署ELFK+zookeeper+kafka架构

目录 前言 一、环境部署 二、部署ELFK 1、ELFK ElasticSearch 集群部署 1.1 配置本地hosts文件 1.2 安装 elasticsearch-rpm 包并加载系统服务 1.3 修改 elasticsearch 主配置文件 1.4 创建数据存放路径并授权 1.5 启动elasticsearch是否成功开启 1.6 查看节点信息 …

Spring(24) Json序列化的三种方式(Jackson、FastJSON、Gson)史上最全!

目录 一、Jackson 方案(SpringBoot默认支持)1.1 Jackson 库的特点1.2 Jackson 的核心模块1.3 Maven依赖1.4 代码示例1.5 LocalDateTime 格式化1.6 统一配置1.7 常用注解1.8 自定义序列化和反序列化1.9 Jackson 工具类 二、FastJSON 方案2.1 FastJSON 的特…

OpenHarmony实战开发-MpChart图表实现案例。

介绍 MpChart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI。本示例主要介绍如何使用三方库MpChart实现柱状图UI效果。如堆叠数据类型显示&#xf…

Niobe WiFi IoT开发板OpenHarmony内核编程开发——Semaphore

本示例将演示如何在Niobe WiFi IoT开发板上使用cmsis 2.0 接口进行信号量开发 Semaphore API分析 osThreadNew() osThreadId_t osThreadNew(osThreadFunc_t func, void *argument,const osThreadAttr_t *attr )描述: 函数osThreadNew通过将线程添加到活动线程列表…

nvm node.js的安装

说明:部分但不全面的记录 因为过程中没有截图,仅用于自己的学习与总结 过程中借鉴的优秀博客 可以参考 1,npm install 或者npm init vuelatest报错 2,了解后 发现是nvm使用的版本较低,于是涉及nvm卸载 重新下载最新版本的nvm 2…

【TCP套接字编程,UDP套接字编程】

文章目录 TCP套接字编程Socket编程Socket 编程TCP套接字编程TCPsocket编程C/S socket 交互: TCP数据结构 sockaddr_in数据结构 hostent UDP套接字编程UDP Socket编程Client/server socket 交互: UDP TCP套接字编程 Socket编程 应用进程使用传输层提供的服务才能交换报文。实现…

解锁创意无限,体验全新Adobe Illustrator 2021 for mac/Win中文版

在数字化创意的浪潮中,Adobe Illustrator 2021中文版无疑是设计师们的得力助手。这款软件集高效、便捷、创新于一体,无论是Mac还是Windows用户,都能在其中找到属于自己的创意空间。 Adobe Illustrator 2021中文版延续了其强大的矢量图形处理…

mybash---打造自己的命令解释器

目前我们Linux的系统默认的命令解释器是bash; 命令解释器(也称为命令行解释器或shell)是计算机操作系统中的一个重要组件,它负责接收用户输入的命令,并解释和执行这些命令。其实命令解释器就是解析命令,执行命令,输出反馈; 1.命令…

【c 语言】声明了一个指针,会给指针分配内存吗?

🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:C语言 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步&…

电商API数据采集接口|跨境卖家在追求精细化运营过程中商品选品以及上架物流几方面应用

跨境电商行业与IT行业资深从业者,知名跨境电商人工智能软件创始人。擅长用RPA机器人技术、aPaaS业务应用平台以及AI人工智能技术为跨境卖家提供新的运营模式和思路,用技术的手段来解决跨境行业的痛点问题。 现在跨境卖家都在追求精细化运营,在…

【Git】Git的安装与常用命令

Git的安装与常用命令 一、Git的安装 (一)下载 官网下载:https://git-scm.com/downloads 镜像网站:https://registry.npmmirror.com/binary.html?pathgit-for-windows/ (二)安装 双击安装&#xff0c…

06-vscode+espidf开发调试方法(内置JTAG调试)

使用VS Code和ESP-IDF进行ESP32开发和调试 在我们搭建 IDF 框架后,OpenOCD 已经自动下载好了, 我们通过 JTAG 接口连接使用 OpenOCD 进行调试。而ESP32芯片中内置 了JTAG 电路,无需额外芯片即可调试,更加方便,所以这里…

开源相机管理库Aravis例程学习(三)——注册回调multiple-acquisition-callback

开源相机管理库Aravis例程学习(三)——回调multiple-acquisition-callback 简介例程代码arv_camera_create_streamArvStreamCallbackTypeArvStreamCallback 简介 本文针对官方例程中的:02-multiple-acquisition-callback做简单的讲解。 ara…