热门标签 | 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 实战】酷炫的开关动画效果

推荐阅读
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • t-io 2.0.0发布-法网天眼第一版的回顾和更新说明
    本文回顾了t-io 1.x版本的工程结构和性能数据,并介绍了t-io在码云上的成绩和用户反馈。同时,还提到了@openSeLi同学发布的t-io 30W长连接并发压力测试报告。最后,详细介绍了t-io 2.0.0版本的更新内容,包括更简洁的使用方式和内置的httpsession功能。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • 在重复造轮子的情况下用ProxyServlet反向代理来减少工作量
    像不少公司内部不同团队都会自己研发自己工具产品,当各个产品逐渐成熟,到达了一定的发展瓶颈,同时每个产品都有着自己的入口,用户 ... [详细]
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • flutter插件搜索及最新依赖包查找
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了flutter插件搜索及最新依赖包查找相关的知识,希望对你有一定的参考价值。一.flutter中包和插件搜索平台 ... [详细]
  • 如何在Vue项目中安装和使用VUX组件?
    vux2模板fork自webpack模板,基本和官方同步。1、默认为webpack2模板npminstallvue-cli-g如果还没安装vueinitairyla ... [详细]
  • 先上图引入插件在pubspec.yaml中引入charts_flutter插件使用的时候版本到0.6.0,插件地址:https:github.comgooglecharts使用插件 ... [详细]
  • 注:此文章仅仅作为个人使用python过程中,认为好用开源包的记录。1.邮件功能yagmailyagmail是一个高度封装的邮件包,大大减少了发邮件的代码量。2.http请 ... [详细]
  • 开发笔记:Flutter学习笔记仿闲鱼底部导航栏带有中间凸起图标
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Linux运维 第五阶段 puppet基础
    一、相关概念:1、puppet基于CS架构,使用ruby编写,在类UNIX平台上集中配置管理系统,它可以管理配置文件、用户、 ... [详细]
  • 学习不系统学过的Android知识全忘记了?思维导图+手写笔记
    话是这样说,但是自己还是很少复习之前的文章,这个怨不得别人。这是问题啊,得解决,于是我苦思冥想,决定这样搞& ... [详细]
  • k8snamespace配置cpu最大和最小限额
    世界上并没有完美的程序,但是我们并不因此而沮丧,因为写程序就是一个不断追求完美的过程。问:如何为namespace配置最大和最小限额&#x ... [详细]
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社区 版权所有