当前位置: 首页 > news >正文

第一个Flutter应用(一)

1、创建项目

1.1 新建

新建

1.2 选择Flutter SDK的位置

选择Flutter SDK的位置

1.3 项目名称

英文单词加下划线起名规范,其他默认即可。

起名

1.4 点击运行

运行

  • 发生报错显示我们的JAVA版本不符合
    JAVA版本不符合
1.5 更改版本设置

版本切换

1.6 再次启动项目

成功启动

2、分析页面代码

以下是lib/main.dart的源代码(为了阅读方便,删掉了注释):

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;State<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),),);}
}
2.1 导包
import 'package:flutter/material.dart'

此代码的作用是导入Material UI组件库。Material是一种标准的移动端和Web端的视觉设计语言,Flutter默认提供了一套丰富的Material风格的UI组件。

2.2 应用入口
void main() {runApp(const MyApp());
}//也可以写作, "=>"符号为Dart中单行函数或者方法的简写方式
// void main() => runApp(const MyApp());

在Flutter应用中main函数为应用程序的入口。main函数中调用了runApp方法,它的功能是启动Flutter应用。runApp接受一个Widget参数,在示例代码中接收了一个MyApp对象,MyApp()是Flutter应用的根组件。

2.3 应用结构
class MyApp extends StatelessWidget {/* 声明了一个常量构造函数,它使得Flutter在编译时就确定MyApp对象的结构,而不是在运行时动态创建。这可以提升一定性能,在编译时优化常量对象的创建过程,并且在多个地方使用同一个常量对象时可以减少内存使用。*/const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(// 应用名称title: 'Flutter Demo',// 主题设置theme: ThemeData(// 主题颜色colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),// 是否使用Material 3的设计规范useMaterial3: true,),// 应用首页路由home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}
  • MyApp类代表Flutter应用,继承了StatelessWidget类,即应用本身也是一个Widget;
  • 在Flutter中,大多数东西都是Widget,包括对齐(alignment)、填充(padding)、布局(layout)等属性;
  • Flutter调用组件的bulid方法构建页面,Wiget的主要功能是提供一个bulid方法描述如何构建UI(在bulid方法内部组合拼装、组合其他基础的Widget来实现);
  • home为Flutter应用的首页,也是一个Widget。
2.4 首页
class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;State<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}

MyHomePage是Flutter应用的首页,其继承于StatefulWidget类,表明它是一个有状态的组件(Stateful Widget);除了有状态组件,还有无状态组件(Stateless Widget)。

  • Stateful Widget可以拥有状态,这些状态在Widget生命周期中是可以发生改变的,而Stateless Widget则是不可变的;
  • Stateful Widget至少由两个类组成:
    • 一个StatefulWidget类;
    • 一个State类;StatefulWidget类本身不发生改变,但State类中持有的状态在Widget生命周期中则可能发生变化。
      ful Widget可以拥有状态,这些状态在Widget生命周期中是可以发生改变的,而Stateless Widget则是不可变的;
  • Stateful Widget至少由两个类组成:
    • 一个StatefulWidget类;
    • 一个State类;StatefulWidget类本身不发生改变,但State类中持有的状态在Widget生命周期中则可能发生变化。

持续更新中

相关文章:

第一个Flutter应用(一)

1、创建项目 1.1 新建 1.2 选择Flutter SDK的位置 1.3 项目名称 英文单词加下划线起名规范&#xff0c;其他默认即可。 1.4 点击运行 发生报错显示我们的JAVA版本不符合 1.5 更改版本设置 1.6 再次启动项目 2、分析页面代码 以下是lib/main.dart的源代码&#xff08;为了阅…...

批量查询快递单号物流信息:高效掌握最后更新动态

在电商和物流行业蓬勃发展的今天&#xff0c;快递单号的物流信息追踪显得尤为重要。对于商家和客户来说&#xff0c;了解包裹的最后更新物流状态是确保货物安全、及时送达的关键。本文将介绍如何批量查询快递单号的物流信息&#xff0c;帮助您高效掌握每个包裹的最新动态。 1运…...

随着硬件水平的提升,LabVIEW有哪些过去的编程方法被淘汰掉了

随着硬件水平的不断提升&#xff0c;尤其是处理器性能、存储能力、通信速度等方面的飞跃&#xff0c;LabVIEW的一些早期编程方法逐渐被更高效、现代的编程技术所取代。以下是一些随着硬件升级而逐步淘汰的LabVIEW编程方法和技术&#xff1a; 1. 低效的数据流传输方式 过去由于…...

Leetcode 206.反转链表

题目链接&#xff1a;206. 反转链表 - 力扣&#xff08;LeetCode&#xff09; 题目描述: 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 解题思路…...

基于springboot和vue.js 养老院管理系统设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm springcloud等开发框架&#xff09; vue .net php phython node.js uniapp小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆…...

高效数据处理:MapReduce与Hive的实战应用

文章目录 hive分析汇总互联网日志分析1.项目需求2.数据说明3.算法思路 用户电影推荐1.项目需求2.数据说明3.算法思路4.解题步骤 简单数据统计WordCount数据说明 疫情数据分析1.项目需求2.数据说明step1:创建ods层数据表step2&#xff1a;创建dwd层数据表step3&#xff1a;创建d…...

【含开题报告+文档+PPT+源码】基于springboot的迎新系统

开题报告 大学迎新系统是为了满足大学在新生入学时的信息化处理需求而开发的系统。在传统方式下&#xff0c;我们新生接待工作是需要新生报名表&#xff0c;就使得我们需要耗费大量的纸张&#xff0c;这将造成资源浪费。在接待新生的时候需要让新生勾选、填写大量的表格&#…...

C#-委托delegate

C#-委托delegate 通常情况下&#xff0c;函数内部需要调用其他函数来实现代码的重用&#xff0c;但这样有一个问题&#xff1a; 如果需要更换所调用的函数则需要对该函数的定义再次修改&#xff0c; 事实上&#xff0c;在程序运行过程中&#xff0c;函数也是作为一个存储在堆中…...

编译Thingsboard3.7.0的过程记录

1、首先去掉test测试&#xff0c;否则会有一堆问题&#xff0c;pom.xml修改如下&#xff1a; <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><version>${surefire.version}</ve…...

vulnhub-THE PLANETS-EARTH靶机

下载并导入靶机至VMWare&#xff0c;设置网络模式为NAT&#xff0c;开机 开启攻击机&#xff08;kali&#xff09;&#xff0c;也设置为Nat模式&#xff0c;与靶机处于同一网段 扫描靶机ip Nmap 192.168.114.0/24 扫描网段内活跃的主机 可以推断靶机ip为192.168.114.129 扫描…...

【C语言】分支和循环(2)

&#x1f914;个人主页: 起名字真南 &#x1f619;个人专栏:【数据结构初阶】 【C语言】 【C】 目录 1 关系操作符2 条件操作符3 逻辑操作符 &#xff1a;|| &#xff0c;&& &#xff0c;&#xff01;3.1 逻辑取反运算符3.2 与运算符3.3 或运算符3.4 练习闰年判断3.5 短…...

Python数据分析-远程办公与心理健康分析

一、研究背景 随着信息技术的飞速发展和全球化的推进&#xff0c;远程工作&#xff08;Remote Work&#xff09;成为越来越多企业和员工的选择。尤其是在2020年新冠疫情&#xff08;COVID-19&#xff09;爆发后&#xff0c;全球范围内的封锁措施使得远程工作模式迅速普及。根据…...

LabVIEW提高开发效率技巧----使用动态事件

在LabVIEW开发过程中&#xff0c;用户交互行为可能是多样且不可预知的。为应对这些变化&#xff0c;使用动态事件是一种有效的策略。本文将从多个角度详细介绍动态事件的概念及其在LabVIEW开发中的应用技巧&#xff0c;并结合实际案例&#xff0c;说明如何通过动态事件提高程序…...

【STM32开发之寄存器版】(五)-窗口看门狗WWDG

一、前言 窗口看门狗简介&#xff1a; 窗口看门狗通常被用来监测&#xff0c;由外部干扰或不可预见的逻辑条件造成的应用程序背离正常的运行序列而产生的软件故障。除非递减计数器的值在T6位变成0前被刷新&#xff0c;看门狗电路在达到预置的时间周期时&#xff0c;会产生一个M…...

Leetcode203.移除链表元素-Python

题目链接&#xff1a;203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&a…...

属性拷贝MapStruct

端请求通过VO对象接收&#xff0c;并通过DTO对象进行流转&#xff0c;最后转换成DO对象与数据库DAO层进行交互&#xff0c;反之亦然。 当业务简单的时候&#xff0c;可以通过手动编码getter/setter函数来复制对象属性。但是当业务变的复杂&#xff0c;对象属性变得很多&#x…...

Chromium 添加书签功能浅析c++

1、在点击添加书签时候此UI控制逻辑代码在 chrome\browser\ui\views\bookmarks\bookmark_bar_view.cc chrome\browser\ui\views\bookmarks\bookmark_bar_view.h 可以在此看到完成 移除 按钮逻辑&#xff0c;以及书签监听事件等。。。 // Implementation for BookmarkNodeAdd…...

Spring Cloud Netflix Ribbon 负载均衡详解和案例示范

1. 引言 在传统的集中式架构中&#xff0c;负载均衡器一般是放置在服务器端的&#xff0c;例如 Nginx等。随着微服务架构的兴起&#xff0c;服务实例的数量和部署地点变得更加动态和分布式&#xff0c;这使得在客户端进行负载均衡成为了一种可行且更灵活的方案。Netflix Ribbo…...

Armeria gPRC 高级特性 - 装饰器、无框架请求、阻塞处理器、Nacos集成、负载均衡、rpc异常处理、文档服务......

文章目录 定义一个示例高级特性装饰器概述简单案例多种装饰方式 无框架请求概述使用方式 阻塞任务处理器背景概述多种使用方式 rpc 异常统一处理使用方式更详细的异常信息 Armeria 提供 gRPC 客户端多种调用方式同步调用异步调用使用装饰器 负载均衡简单案例Armeria 提供的所有…...

如何制作一个企业网站,建设网站的基本步骤有哪些?

企业网站是企业的门面和名片&#xff0c;决定网民对企业的第一印象&#xff0c;因此&#xff0c;现在很多公司想做一个属于自己网站&#xff0c;但是不知道怎么做&#xff0c;更不知道从何做起&#xff0c;更别说做成了。为了能够让大家清楚如何做一个企业网站&#xff0c;现在…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...