热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【Flutter实战】酷炫的开关动画效果

此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用Flutter实现了。更多动画效果及Flutter资源:https:github.com781238222flutte

【Flutter 实战】酷炫的开关动画效果

此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了。
更多动画效果及Flutter资源:https://github.com/781238222/flutter-do

【Flutter 实战】酷炫的开关动画效果

添加依赖

在项目的 pubspec.yaml 文件中添加依赖:

dependencies:
	wheel_switch: ^0.0.1

执行命令:

flutter pub get

使用

WheelSwitch(
  value: false,
)

【Flutter 实战】酷炫的开关动画效果

组件默认的宽高分别是80、30,也可以指定宽高:

WheelSwitch(
  value: false,
  width: 150,
  height: 50,
)

开关发生变化回调:

WheelSwitch(
  value: false,
  onChanged: (value){
    print('WheelSwitch : $value');
  },
)

设置其轨道颜色,分为激活(开)和未激活(关)状态的颜色:

WheelSwitch(
  value: false,
  width: 150,
  height: 50,
  activeTrackColor: Colors.red,
  inactiveTrackColor: Colors.green,
)

【Flutter 实战】酷炫的开关动画效果

设置滑块的颜色:

WheelSwitch(
  value: false,
  width: 150,
  height: 50,
  activeTrackColor: Colors.red,
  inactiveTrackColor: Colors.green,
  activeThumbColor: Colors.blue,
  inactiveThumbColor: Colors.green,
)

未激活状态(关):

【Flutter 实战】酷炫的开关动画效果

激活状态(开):

【Flutter 实战】酷炫的开关动画效果

设置文字和文字样式:

WheelSwitch(
  value: false,
  width: 150,
  height: 50,
  activeText: '开',
  inactiveText: '关',
  activeTextStyle: TextStyle(color: Colors.white,fontSize: 20),
  inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10),
)

【Flutter 实战】酷炫的开关动画效果

交流

老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

【Flutter 实战】酷炫的开关动画效果 【Flutter 实战】酷炫的开关动画效果

推荐阅读
  • 基于Flutter实现风车加载组件的制作_Android
    Flutter官方提供了诸如 CircularProgressIndicator和 LinearProgressIndicator两种常见的加载指示组件,但是说实话,实在太普通,所 ... [详细]
  • Flutter入门指南:实现自动关闭的对话框与提示
    本文为Flutter系列教程的一部分,专注于讲解如何在Flutter应用中实现自动关闭的对话框和提示。通过具体的代码示例,帮助开发者掌握SnackBar、BottomSheet和Dialog的使用方法。 ... [详细]
  • 在Spring Boot项目中,通过YAML配置文件为静态变量设置值的方法与实践涉及以下几个步骤:首先,创建一个新的配置类。需要注意的是,自动生成的setter方法默认是非静态的,因此需要手动将其修改为静态方法,以确保静态变量能够正确初始化。此外,建议使用`@Value`注解或`@ConfigurationProperties`注解来注入配置属性,以提高代码的可读性和维护性。 ... [详细]
  • 本文深入探讨了Spring Cloud Eureka在企业级应用中的高级使用场景及优化策略。首先,介绍了Eureka的安全配置,确保服务注册与发现过程的安全性。接着,分析了Eureka的健康检查机制,提高系统的稳定性和可靠性。随后,详细讨论了Eureka的各项参数调优技巧,以提升性能和响应速度。最后,阐述了如何实现Eureka的高可用性部署,保障服务的连续性和可用性。通过这些内容,开发者可以更好地理解和运用Eureka,提升微服务架构的整体效能。 ... [详细]
  • 本文介绍了如何在三台CentOS 7.5虚拟机上通过Docker部署RabbitMQ集群,包括环境准备、容器创建、集群配置及故障处理等内容。 ... [详细]
  • 解决getallheaders函数导致的500错误及8种服务器性能优化策略
    本文探讨了解决getallheaders函数引起的服务器500错误的方法,并介绍八种有效的服务器性能优化技术,包括内存数据库的应用、Spark RDD的使用、缓存策略的实施、SSD的引入、数据库优化、IO模型的选择、多核处理策略以及分布式部署方案。 ... [详细]
  • 本文介绍如何使用 jQuery 的 AJAX 方法从服务器获取 JSON 数据,并通过遍历这些数据来创建包含公司及其产品信息的数组。 ... [详细]
  • 本文详细介绍了C++标准模板库(STL)中各容器的功能特性,并深入探讨了不同容器操作函数的异常安全性。 ... [详细]
  • 学习目的:1.了解android线程的使用2.了解主线程与子线程区别3.解析异步处理机制主线程与子线程:所谓主线程,在Windows窗体应用程序中一般指UI线程,这个是程序启动的时 ... [详细]
  • 本文针对公司项目中普遍存在的IE浏览器兼容性问题,特别是IE9及以下版本,提出了具体的解决方案,确保用户在这些旧版浏览器中也能顺利实现图片上传预览功能。 ... [详细]
  • 万事起于配置开发环境
    万事起于配置开发环境 ... [详细]
  • 如何高效学习鸿蒙操作系统:开发者指南
    本文探讨了开发者如何更有效地学习鸿蒙操作系统,提供了来自行业专家的建议,包括系统化学习方法、职业规划建议以及具体的开发技巧。 ... [详细]
  • 检查 Kubernetes 系统命名空间中的 Pod 状态时,发现 Metric Server Pod 虽然处于运行状态,但存在异常:日志显示 'it doesn’t contain any IP SANs'。 ... [详细]
  • 在 Kubernetes 中,Pod 的调度通常由集群的自动调度策略决定,这些策略主要关注资源充足性和负载均衡。然而,在某些场景下,用户可能需要更精细地控制 Pod 的调度行为,例如将特定的服务(如 GitLab)部署到特定节点上,以提高性能或满足特定需求。本文深入解析了 Kubernetes 的亲和性调度机制,并探讨了多种优化策略,帮助用户实现更高效、更灵活的资源管理。 ... [详细]
  • 经过半年的精心整理,我们汇总了当前市场上最全面的Android面试题解析,为移动开发人员的晋升和加薪提供了宝贵的参考资料。本书详细涵盖了从基础到高级的各类面试题,帮助读者全面提升技术实力和面试表现。章节目录包括:- 第一章:Android基础面试题- 第二章:... ... [详细]
author-avatar
Sunlight丶丶丶
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有