Flutter与Dart学习之路之vscode建一个flutter的简单demo

最新推荐文章于 2024-06-07 18:39:13 发布
最新推荐文章于 2024-06-07 18:39:13 发布
阅读量1.7k 收藏
点赞数
分类专栏： flutter dart 文章标签： flutter dart demo vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BeamCSDN/article/details/86773760
版权
Flutter与Dart学习之路之vscode建一个flutter的简单demo效果展示项目实现流程打开虚拟机创建项目效果展示截图项目实现流程打开虚拟机点击 no device选择虚拟机（如果没有的需要去下载先，不过在安装flutter环境的时候大家应该都有下载好了，用flutter doctor查看一下）创建项目在命令行下，到达自己选择的工作空间输入以下指令（第一...
摘要由CSDN通过智能技术生成

Flutter与Dart学习之路之vscode建一个flutter的简单demo

效果展示

  • 截图

在这里插入图片描述

项目实现流程

打开虚拟机

  • 点击 no device
    在这里插入图片描述
  • 选择虚拟机（如果没有的需要去下载先，不过在安装flutter环境的时候大家应该都有下载好了，用flutter doctor查看一下）
    在这里插入图片描述

创建项目

  • 在命令行下，到达自己选择的工作空间输入以下指令（第一次可能有点久） 
    • flutter create demo
  • 完成后显示如下

在这里插入图片描述

  • 打开main.dart 一开始也是可以运行的，是一个官方提供的计数器，我们全部删除，改为如下,方便理解
最低0.47元/天 解锁文章
Beamcsdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Dart教程-1.vscode配置dart开发环境
空谷足音的博客
06-19 9080
1. Dart sdk下载和环境配置 下载地址：http://www.gekorm.com/dart-windows/ 下载完成后安装并配置环境变量： 替换安装后的Dart sdk. cmd运行: dart --version. 出现下面的结果表示安装和配置环境成功！ 2.vscode 安装Dart插件 3. vscode安装Code Runner ...
vsCode 编写flutter
测试0901-1
03-07 512
昨天看到云栖社区发布的，咸鱼也公布了flutter框架，感觉很成熟了，所以很是感兴趣，开始学习一下,后续会再次更新~ 原来开发原生安卓的小伙伴们，肯定都熟悉Android Studio，都知道这个AS是很耗内存的，鉴于用苹果手机的我，只能在电脑上运行虚拟机，这样一搞我的电脑会很吃内存，很卡顿，而且vsCode 已经很好地支持了flutter编写，所以我们...
在 VSCode 中搭建 Flutter 开发环境并运行项目
最新发布
Chloeeeeeeee的博客
06-07 3398
在 VSCode 中运行 Flutter 项目并启动虚拟机的步骤如下：首先，安装 Flutter SDK 并添加其 bin 目录到系统 PATH，然后在 VSCode 中安装 Flutter 和 Dart 插件。接着，下载并安装 Android Studio，配置 Android 模拟器。创建 Flutter 项目后，打开终端启动模拟器，或通过 VSCode 工具栏选择设备，按 F5 运行项目。最后，使用调试控制台设置断点和检查变量，进行调试。这样即可在 VSCode 中运行和调试 Flutter 项目。
Windows安装flutter并在VsCode上运行教程
weixin_42322441的博客
09-29 449
1安装jdk 1- 下载jdk安装包 2- 安装 （最好是指定目录/不要在c盘/目录不要有中文字符） 3- 配置环境变量 ----右键“我的电脑>>属性>>高级系统设置>>高级>>环境变量 3.1 新建JAVA_HOME变量 变量名：JAVA_HOME 变量值：填写JDK安装目录 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200929173943307.png#pic_center) 3.2 找到
VS Code 集成 flutter dart 开发
Admans的专栏
11-24 973
一、关于Flutter Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。 https://flutterchina.club/ 设置服务器镜像： # mac linux export PUB_HOST...
使用 VsCode 配置 dart 开发环境
EvloutionPLUS的博客
05-17 3695
首先得下载 Dart SDK 并配置环境变量 下载地址：http://www.gekorm.com/dart-windows/ 下载完成后安装并配置环境变量： cmd运行: dart --version. 出现下面的结果表示安装和配置环境成功！ vscode 安装Dart插件 vscode安装Code Runner 新建工作空间,并新建main.dart 点击右上角的箭头，或者右键文件或者...
flutter构建widget树demo，flutter资料学习demo，dart语言学习基础
09-15
flutter基础学习demo，该demo中利用widget树原理构建复杂的布局和效果，其中使用了动态路由，以及手势；通过该demo可以很好的学习的如何布局，手势的使用以及动态路由的使用，通过这些可以很快的了解到跨平台flutter...
flutter-web-demo：by由Flutter和Dart支持的自适应Web应用程序
02-03
Flutter Web Demo是一个基于Flutter框架和Dart编程语言的项目，旨在展示如何构建可自适应的Web应用程序。这个项目强调了Flutter对于跨平台开发的强大能力，不仅限于原生移动应用，还包括Web平台。以下是关于这个项目...
第一个Flutter demo——实现无限循环列表
01-07
第一个Flutter demo（一） 参照flutter官网，实现第一个Flutter应用。第一部分：实现无限循环列表 第一部分功能介绍： 从零开始创建了一个 Flutter 应用； 编写 Dart 代码； 使用外部的第三方库（package）； 在开发...
flutter:我所有的开源flutter和dart项目的教程都在这里发布
05-16
扑在这个存储库中，我发布了所有的开源flutter，dart项目和教程。书面教程影片教学 颤振完整应用| | 教程 快速参考Dart语言| 视频颤振视频 资源官方网站小部件类别开发人员
使用Flutter开发的一个demo对于纯flutter的开发
08-10
【标题】: "Flutter开发实战：一个纯Flutter的Demo应用" 在移动开发领域，Flutter作为Google推出的开源跨平台UI框架，已经受到了广泛的关注。这个"使用Flutter开发的一个demo"项目，旨在展示如何利用Flutter构建一...
VScode 新建 并 通过USB真机运行Flutter程序
热门推荐
爪白白的个人博客
06-08 1万+
下载安装好 VScode 下载安装 Flutter 插件 安装 flutter 插件时会自安装 Dart 插件 File --> Open Folder 打开 项目 所在文件夹 打开 main.dart 配置真机：点击查看如何配置 连接真机，运行程序 打开控制台：Ctrl+· （Ctrl+点）（1 左边那个键） 输入： flutter devices （找到真机设备） 输入...
Dart学习笔记-整合基础知识实现的 Demo
龙衣
02-08 383
参考：(1) 为 Java 开发人员准备的 Dart 教程 准备工作 我们使用 dartpad 在线运行 dart 代码，当然如果你有WebStorm也可以添加dart插件运行dart代码。 实现的功能是：购物车小票效果，效果图如下： 分析要实现以上的购物车小票示例需要准备什么？ 格式化输出结果 商品类：名称、单价、数量 购物车类：商品、总价、结算日期 ...
Flutter移动端实战手册
piade的博客
05-05 271
在进行iOS和Flutter的混编时，iOS比Android的接入方式略复杂，但也还好。现在市面上有不少接入Flutter的方案，但大多数都是千篇一律相互抄的，没什么意义。进行Flutter混编之前，有一些必要的文件。xcode_backend.sh文件，在配置flutter环境的时候由Flutter工具包提供。xcconfig环境变量文件，在Flutter工程中自动生成，每个工程都不一样。xcconfig是Xcode的配置文件，Flutter在里面配置了一些基本信息和路径，接入Flutter前需要先将xc
安装Dart环境以及VsCode中Dart相关插件
yyzx_yyzx的博客
07-17 2144
Dart初学所需的Dart程序以及VsCode相关插件。
dart语言第一章简单入门
qq_43652113的博客
10-26 309
Dart语言简单入门1 一.创建dart文件并开始编译 这是打开vscode的一个新建窗口 然后，在除了C盘的盘里新建一个文件夹，做为你存放dart/flutter项目的文件夹，然后在这个文件夹里再新建一个文件夹，作为你dart文件的存放文件夹。 比如我这个App就是放项目的文件夹。然后我在这个文件夹里新建了个dart demo，现在这是个空文件夹。（文件夹里东西很多，是我以前建的） 好，有了dart demo,我们回到vscode 点左上角的文件，打开文件夹 左边这里的目录是你刚才建的文件夹，现在
Dart及Flutter杂记
北光
08-28 5037
近几天在网上看到了Flutter的文章，顿进感觉到眼睛一亮。吸引我的主要是性能，能达到120fps。android最大的问题就是性能不如苹果。同样的配置，android容易一顿一顿的，苹果却是如丝般的柔滑，差异是很明显的。 　　Flutter与ReactNative类似，开发的程序能同时运行在android和ios下，关键是性能，能超过android上原生的用java开发的程序，这太让人兴奋了。
flutter笔记1 VScode安装dart code插件踩坑记录
weixin_33778544的博客
03-11 1349
新手菜鸟一枚，想从产品转入技术坑，目标：移动端APP开发。最近听技术达人 飞狐 说flutter beta发布了，于是乎零基础入坑~话说想提高英文水平的同学，请移步flutter官网，从知道flutter到现在刚好24小时，在这里分享一点学习中遇到的小坑。 1.下载flutter SDK git clone https://github....
实现一个flutter 状态管理demo
04-21
好的，我可以帮助你实现一个 Flutter 状态管理的 Demo。你可以通过使用 Flutter 自带的状态管理方案、Provider 等第三方库来实现。这里提供一个使用 Provider 的示例代码： ``` import 'package:flutter/material....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值