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);}
    }
    

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

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

相关文章

【开发实战】QT5 + OpenCV4 开发环境配置应用演示

前言 作为深度学习算法工程师&#xff0c;必须要掌握应用开发技能吗&#xff1f;搞工程肯定是必须要会界面开发&#xff0c;QT就是一个很不错的选择。本文以QT5.15 OpenCV4.8 OpenVINO2023为例&#xff0c;搭建应用开发环境&#xff0c;演示深度学习模型的QT应用案例。 开发…

windows USB 设备驱动开发-开发Type C接口的驱动程序(三)

编写 USB Type C 端口控制器驱动程序 如果 USB Type-C 硬件实现 USB Type-C 或电源传送 (PD) 物理层&#xff0c;但未实现供电所需的状态机&#xff0c;则需要编写 USB Type-C 端口控制器驱动程序。 在 Windows 10 版本 1703 中&#xff0c;USB Type-C 体系结构已得到改进&am…

pytorch学习(十)优化函数

优化函数主要有&#xff0c;SGD, Adam&#xff0c;RMSProp这三种&#xff0c;并且有lr学习率&#xff0c;momentum动量&#xff0c;betas等参数需要设置。 通过这篇文章&#xff0c;可以学到pytorch中的优化函数的使用。 1.代码 代码参考《python深度学习-基于pytorch》&…

Java里的引用详解

1.体验方法引用 方法引用的出现原因 在使用Lambda表达式的时候&#xff0c;我们实际上传递进去的代码就是一种解决方案&#xff1a;拿参数做操作 那么考虑一种情况&#xff1a;如果我们在Lambda中所指定的操作方案&#xff0c;已经有地方存在相同方案&#xff0c;那是否还有必要…

2024最新教程,在docker中安装kali,并配置ssh连接

docker的基本使用&#xff1a;搭建高效攻防靶场vulfocus与Docker仓库管理实战&#xff1a;从听说到入门 拉取kali官方镜像 docker pull kalilinux/kali-rolling 启动一个kali镜像&#xff0c;将容器中的22端口映射到主机100端口&#xff0c;方便ssh直接连接 docker run -it…

Java 集合框架:Java 中的优先级队列 PriorityQueue 的实现

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 018 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…

用不同的url头利用Python访问一个网站,把返回的东西保存为txt文件

这个需要调用requests模块&#xff08;相当于c的头文件&#xff09; import requests 还需要一个User-Agent头&#xff08;这个意思就是告诉python用的什么系统和浏览器&#xff09; Google Chrome&#xff08;Windows&#xff09;: Mozilla/5.0 (Windows NT 10.0; Win64; x64…

【Git命令】git rebase之合并提交记录

使用场景 在本地提交了两个commit&#xff0c;但是发现根本没有没必要分为两次&#xff0c;需要想办法把两次提交合并成一个提交&#xff1b;这个时候可以使用如下命令启动交互式变基会话&#xff1a; git rebase -i HEAD~N这里 N 是你想要重新调整的最近的提交数。 如下在本地…

vscode配置django环境并创建django项目(全图文操作)

文章目录 创建项目工作路径下载python插件&#xff1a;创建虚拟环境选择虚拟环境在虚拟环境中安装Django创建Django项目 创建项目工作路径 下载python插件&#xff1a; 创建虚拟环境 >python:create 于是会多出一个.venv的目录 选择虚拟环境 在虚拟环境中安装Django …

MySQL 数据库 day 7.16

ok了家人们今天继续记录一下数据库,看看今天学了什么。 一.事物概述 1.1 环境准备 -- 账户表 create table account( id int primary key auto_increment, name varchar(20), money double );insert into account values (null,张三,1000); insert into account values (n…

解决Linux桌面初始化问题

问题 启动vnc桌面&#xff0c;提示问题 定位 从[t]csh手册 可以看到&#xff0c;其初始化流程 经定位&#xff0c;是.cshrc的这段代码存在&#xff0c;导致桌面初始化异常。 [wanlin.wangicinfra-cn-172-16-0-115 ~]$ cat .cshrc ...部分省略... # Environment for anac…

Unity UGUI 之 Canvas Scaler

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 1.什么是Canvas Scaler Unity - 手册&#xff1a;Canvas Scaler 重点&#xff1a;虽然叫…

【springboot】中使用--WebMvcConfigurer

WebMvcConfigurer 一、页面跳转控制器step1:创建视图&#xff0c;resources/templates/index.htmlstep2:创建SpringMVC配置类step3:测试功能 二、数据格式化step1:创建 DeviceInfo 数据类step2&#xff1a;自定义 Formatterstep3: 登记自定义的 DeviceFormatterstep4: 新建 Con…

Flutter中GetX的用法(超详细使用指南之路由依赖管理篇)

目录 1.前言 2.GetX 依赖管理概述 1.GetX 依赖管理的基本概念 2.与其他依赖管理工具的比较 3. 基础依赖注入 1.Get.put 2.Get.lazyPut 3.Get.putAsync 4.高级依赖注入 1.使用Get.create 2.依赖生命周期管理 5. 参考资料 1.前言 今天这篇博客主要介绍Getx的三大功能…

java基于ssm+vue 药品网购平台

1用户前台功能模块 1.1前台首页 前台首页详情页面&#xff1a;首页、药品信息、疫情常识、保健品推荐、个人中心、后台管理、购物车等操作。程序效果图如下图1所示&#xff1a; 前台页面等内容&#xff0c;如图1所示。 1.2个人中心 在前台页面查看个人中心用户注册、登录&am…

【proteus经典实战】LCD滚动显示汉字

一、简介 Proteus是一款功能丰富的电子设计和仿真软件&#xff0c;它允许用户设计电路图、进行PCB布局&#xff0c;并在虚拟环境中测试电路功能。这款软件广泛应用于教育和产品原型设计&#xff0c;特别适合于快速原型制作和电路设计教育。Proteus的3D可视化功能使得设计更加直…

多任务高斯过程数学原理和Pytorch实现示例

高斯过程其在回归任务中的应用我们都很熟悉了&#xff0c;但是我们一般介绍的都是针对单个任务的&#xff0c;也就是单个输出。本文我们将讨论扩展到多任务gp&#xff0c;强调它们的好处和实际实现。 本文将介绍如何通过共区域化的内在模型(ICM)和共区域化的线性模型(LMC)&…

【Linux知识点汇总】07 Linux系统防火墙相关命令,关闭和开启防火墙、开放端口号

​完整系列文章目录 【Linux知识点汇总】 心血来潮突然想起之前写过的系列文章【Linux知识点汇总】还未完结&#xff0c;那么今天就继续吧 说明&#xff1a;这个系列的内容&#xff0c;在系列【Linux服务器Java环境搭建】中会经常用到&#xff0c;大家可以自行查找相关命令 一、…

Docker搭建本地私有仓库

目录 1.下载运行registry 镜像 2.添加私有镜像仓库地址 3.为镜像添加标签 4.上传到私有仓库 5.查看私有仓库的所有镜像 6.测试私有仓库下载 1.下载运行registry 镜像 docker pull registry docker run -d -v /data/registry:/var/lib/registry -p 5000:5000 --restartal…

PostgreSQL使用(二)——插入、更新、删除数据

说明&#xff1a;本文介绍PostgreSQL的DML语言&#xff1b; 插入数据 -- 1.全字段插入&#xff0c;字段名可以省略 insert into tb_student values (1, 张三, 1990-01-01, 88.88);-- 2.部分字段插入&#xff0c;字段名必须写全 insert into tb_student (id, name) values (2,…