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

flutter 充电气泡

前言:

之前一直看到 有手机充电的时候 有气泡从Type-C 的位置冒泡上来 慢慢上移, 然后和上面的圆圈 会和,感觉还是挺好看的。今天试了下用 Flutter 实现了一版本。大致效果如下,而且气泡 和 气泡直接还可以粘黏

 实现原理:

大致的布局就是这样的: Stack 包裹住所有的元素,需要位置移动的是 AnimatedBuilder,这里是把他们独立出来,方便随机的时候打散处理。

代码实现:

  • PageBubble.dart 整个页面 气泡的粘连效果 有点吃性能
    import 'dart:math';
    import 'dart:ui';import 'package:flutter/material.dart';
    import 'package:untitled1a/pages/example1/bubble_dot.dart';class PageBubble extends StatefulWidget {const PageBubble({Key? key}) : super(key: key);@overrideState<PageBubble> createState() => _PageBubbleState();
    }class _PageBubbleState extends State<PageBubble>with SingleTickerProviderStateMixin {late AnimationController _animationController;final Random random = Random();@overridevoid initState() {_animationController = AnimationController(vsync: this,duration: const Duration(milliseconds: 2500),);_animationController.repeat();super.initState();}@overridevoid dispose() {_animationController.dispose();// TODO: implement disposesuper.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text('充电气泡'),),body: Align(alignment: Alignment(0.0, 1),child: Container(height: MediaQuery.of(context).size.height / 3 * 2,width: 250,// color: Colors.blue,child: Stack(alignment: Alignment.topCenter,children: [...buildAnimatedPositioned(),Padding(padding: const EdgeInsets.only(top: 40,left: 0,),child: RotationTransition(alignment: Alignment.center,turns: _animationController,child: Container(width: 200,height: 200,decoration: const BoxDecoration(color: Colors.deepPurple,borderRadius: BorderRadius.only(topRight: Radius.circular(70),topLeft: Radius.circular(90),bottomRight: Radius.circular(60),bottomLeft: Radius.circular(80),),),),),),//这个效果很有意思 就是有费性能  不需要可以移除掉BackdropFilter(filter: ImageFilter.dilate(radiusX: 3.0, radiusY: 3.0),child: Container(),),Positioned(left: 35,top: 45,child: Container(width: 180,height: 180,decoration: BoxDecoration(color: Colors.black,borderRadius: BorderRadius.circular(90),),child: const Center(child: Text('89%',style: TextStyle(fontSize: 40,color: Colors.white,),),),),),],),),),);}int getRandomNumber(int min, int max) {var random = Random();return min + random.nextInt(max - min + 1);}List<Widget> buildAnimatedPositioned() {List<Widget> _list = [];List.generate(9,(index) => {_list.add(BubbleDot(time: getRandomNumber(2000, 3500))),});return _list;}
    }
    

  • BubbleDot.dart    气泡效果    之所以把气泡单独出来是为了后面的随机打散操作
    import 'dart:math';
    import 'package:flutter/material.dart';class BubbleDot extends StatefulWidget {final int time;const BubbleDot({super.key, required this.time});@overrideState<BubbleDot> createState() => _BubbleDotState();
    }class _BubbleDotState extends State<BubbleDot>with SingleTickerProviderStateMixin {late AnimationController _animationController;late Animation<double> _animation;final Random random = Random();late double _leftPos = 0;late double _dotWidth = 0;@overridevoid initState() {_animationController = AnimationController(vsync: this,duration: Duration(milliseconds: widget.time),);_animation = _animationController.drive(Tween<double>(begin: getRandomNumber(660, 800).toDouble(), end: 100));//_leftPos = random.nextDouble() * 200;_leftPos = getRandomNumber(35, 180).toDouble();_dotWidth = getRandomNumber(30, 66).toDouble();_animationController.addStatusListener((AnimationStatus status) => {print('status  $status')});_animationController.repeat();// TODO: implement initStatesuper.initState();}@overridevoid dispose() {// TODO: implement dispose_animationController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return AnimatedBuilder(animation: _animation,builder: (BuildContext context, Widget? child) {return Positioned(top: _animation.value,//top: 240,left: _leftPos,child: ClipOval(child: Container(width: _dotWidth,height: _dotWidth,decoration: BoxDecoration(color: Colors.deepPurple,boxShadow: [BoxShadow(color: Colors.deepPurple.withOpacity(0.5),spreadRadius: 6,blurRadius: 8,offset: Offset(4, 4), // changes position of shadow),],),),),);},);}int getRandomNumber(int min, int max) {return min + random.nextInt(max - min + 1);}
    }
    

相关文章:

flutter 充电气泡

前言&#xff1a; 之前一直看到 有手机充电的时候 有气泡从Type-C 的位置冒泡上来 慢慢上移&#xff0c; 然后和上面的圆圈 会和&#xff0c;感觉还是挺好看的。今天试了下用 Flutter 实现了一版本。大致效果如下&#xff0c;而且气泡 和 气泡直接还可以粘黏 实现原理&#xff…...

【C++】deque以及优先级队列

容器适配器 deque的介绍deque的原理介绍 priority_queue的介绍与使用priority_queue的介绍priority_queue的使用constructor&#xff08;构造函数&#xff09;emptypushpoptopsize priority_queue的模拟实现 仿函数何为适配器容器适配器deque的缺陷选择deque作为适配器的理由ST…...

手机如何播放电脑的声音?

准备工具&#xff1a; 有线耳机&#xff0c;手机&#xff0c;电脑&#xff0c;远控软件 1.有线耳机插电脑上 2.电脑安装pc版远控软件&#xff0c;手机安装手机端控制版远控软件 3.手机控制电脑开启声音控制 用手机控制电脑后&#xff0c;打开声音控制&#xff0c;电脑播放视频…...

系统架构设计师教程 第3章 信息系统基础知识-3.6 办公自动化系统(OAS)-解读

系统架构设计师教程 第3章 信息系统基础知识-3.6 办公自动化系统&#xff08;OAS&#xff09; 3.6.1 办公自动化系统的概念3.6.1.1 办公活动3.6.1.1 办公自动化的概念 3.6.2 办公自动化系统的功能3.6.2.1 事务处理3.6.2.1.1 单机系统3.6.2.1.2 多机系统 3.6.2.2 信息管理3.6.2.…...

解决Element UI 表格组件懒加载数据刷新问题

一、问题描述 element ui的table组件设置成懒加载时&#xff0c;遇到数据表格需要更新、删除等操作&#xff0c;子节点不会自动更新。 二、解决思路 刷新数据&#xff0c;就是重新调用load&#xff08;&#xff09;&#xff0c;通过map记录已展开的节点&#xff0c;需要刷新…...

【系统架构设计 每日一问】二 MySql主从复制延迟可能是什么原因,怎么解决

主从复制的架构设计如下图所示&#xff1a; 同步原理 具体到数据库之间是通过binlog和复制线程操作的&#xff1a; Master的更新事件(update、insert、delete)会按照顺序写入bin-log中。当Slave连接到Master的后,Master机器会为Slave开启&#xff0c;binlog dump线程,该线程…...

Ubuntu Grub引导优化

配置文件 sudo vim /etc/default/grub修改参数 引导菜单等待时间 GRUB_TIMEOUT3自动引导上次选择的系统 如果安装了双系统或多系统&#xff0c;可以考虑配置此参数。 # 此参数默认值为0&#xff0c;引导第一个引导项 GRUB_DEFAULTsaved# 此参数默认没有&#xff0c;需要手…...

第3关 -- Git 基础知识

任务1: 破冰活动&#xff1a;自我介绍 任务2: 实践项目&#xff1a;构建个人项目 MeiHuaYiShu...

AttributeError: ‘WebDriver‘ object has no attribute ‘find_element_by_xpath‘

问题&#xff1a; 跑之前的python爬虫代码的时候报错 AttributeError: WebDriver object has no attribute find_element_by_xpath 源代码&#xff1a; elements self.driver.find_elements_by_xpath("//tbody[starts-with(id,normalthread)]/tr/th/a[1]")原因&…...

题解:小S与机房里的电脑 Computer_C++算法竞赛_贪心_二分答案_模拟_数据结构

文章目录 小S与机房里的电脑 Computer传统题题目描述输入格式输出格式样例样例输入 1样例输出 1样例输入 2样例输出 2 提示解题思路AC CodeEnd 小S与机房里的电脑 Computer 传统题 时间限制: 1000ms内存限制: 256MiB 题目描述 最近小S想带他的学生打组队娱乐赛&#xff0c;…...

Python @staticmethod、super().__init__()和self

最近在看代码&#xff0c;由于之前没有系统学习过Python&#xff0c;就有些知识点不是很清楚&#xff0c;这里整理一下&#xff0c;方便以后查阅。 Python中的staticmethod\super.init和self Python 装饰器staticmethod和classmethod的作用与区别作用区别代码演示 super() 函数…...

Linux网络:应用层协议HTTP(一)

一、什么是HTTP协议 虽然我们说, 应用层协议是我们程序猿自己定的. 但实际上, 已经有大佬们定义了一些现成的, 又非常好用的应用层协议, 供我们直接参考使用. HTTP(超文本传输协议)就是其中之一。 在互联网世界中&#xff0c;HTTP&#xff08;HyperText Transfer Protocol&…...

Tomcat底层原理

Tomcat是一个开源的Java Servlet容器&#xff0c;它实现了Java Servlet和JavaServer Pages (JSP) 技术&#xff0c;用于运行Java Web应用。它是由Apache软件基金会开发和维护的。以下是对Tomcat底层原理的详细解析&#xff1a; 1. 启动流程 Tomcat的启动流程主要分为以下几个…...

【Linux】Linux环境设置环境变量操作步骤

Linux环境设置环境变量操作步骤 在一些开发过程中本地调试经常需要依赖环境变量的参数&#xff0c;但是怎么设置对小白来说有点困难&#xff0c;今天就介绍下具体的操作步骤&#xff0c;跟着实战去学习&#xff0c;更好的检验自己的技术水平&#xff0c;做技术还是那句话&…...

C语言:键盘录入案例

主要使用了scanf&#xff1b; scanf的使用方法和注意事项&#xff1a; 1.作用&#xff1a; 用于接收键盘输入的数据并赋值给对应的变量 2.使用方式; scanf("占位符",&变量名); 3.注意事项; 占位符后面的的变量要对应 第一个参数中不写换行 案例1&#xf…...

Nginx 中如何实现请求的排队机制?

Nginx 中如何实现请求的排队机制&#xff1f; 在当今数字化的时代&#xff0c;网站和应用的流量就如同潮水一般&#xff0c;时涨时落&#xff0c;时急时缓。想象一下&#xff0c;当流量如洪水猛兽般汹涌而来&#xff0c;服务器就像是那抗洪的堤坝&#xff0c;如果没有有效的管…...

synergy配置

今天介绍一个电脑同步软件synergy。 我们开发时一般会用两套设备&#xff0c;如果使用两套键盘操作起来会很麻烦&#xff0c;这个软件就是解决这个问题&#xff0c;可以使用一套键盘同时操作两台电脑&#xff0c;另一台作为客户端被控制。 安装 在两台电脑上各自下载安装syne…...

Qt开发网络嗅探器03

数据包分析 想要知道如何解析IP数据包&#xff0c;就要知道不同的IP数据包的包头结构&#xff0c;于是我们上⽹查查资料&#xff1a; 以太网数据包 ARP数据包 IPv4 IPv6 TCP UDP ICMP ICMPv6 根据以上数据包头结构&#xff0c;我们就有了我们的protocol.h文件&#xff0c;声明…...

抖音短视频seo矩阵系统源码开发技术分享(二)--SaaS开源

目录 市场背景分析 一、抖音短视频seo矩阵系统开发部署流程 二、 源码开发功能构思 三、 抖音短视频seo源码开发部署注意事项 四、 部分开发代码展示 市场背景分析 抖音短视频seo矩阵系统是通过不同平台不同账号之间建立联系&#xff0c;通过将同一品牌下不同平台不同账号…...

git-常用基础指令

一、基本指令 1. 配置用户名和邮箱 git config --global user.name "Your Name" git config --global user.email "your.emailexample.com"2. 初始化仓库 git init3. 克隆仓库 git clone <repository_url>4. 查看当前状态 git status5. 添加文件…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...