此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了。

更多动画效果及Flutter资源:https://github.com/781238222/flutter-do

添加依赖

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

dependencies:
wheel_switch: ^0.0.1

执行命令:

flutter pub get

使用

WheelSwitch(
value: false,
)

组件默认的宽高分别是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,
)

设置滑块的颜色:

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

未激活状态(关):

激活状态(开):

设置文字和文字样式:

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

交流

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

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

【Flutter 实战】酷炫的开关动画效果的更多相关文章

  1. Flutter酷炫的路由动画效果

    现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...

  2. Flutter 实现酷炫的3D效果

    老孟导读:此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo ext ...

  3. [转]收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation

    原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...

  4. [转]收集android上开源的酷炫的交互动画和视觉效果

    原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...

  5. 使用纯 CSS 实现超酷炫的粘性气泡效果

    最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  7. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突

    使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...

  9. Android github上开源项目、酷炫的交互动画和视觉效果地址集合

    Android上开源的酷炫的交互动画和视觉效果:http://blog.csdn.net/u013278099/article/details/50323689 Awesome-android-ui: ...

随机推荐

  1. oracle数据库表空间扩展

    //查看表空间情况 SELECT Upper(F.TABLESPACE_NAME) "表空间名",D.TOT_GROOTTE_MB "表空间大小(M)",D.T ...

  2. OpenCV412+contrib+CUDA+cuDNN

    首先现在好软件(包含源码和官方编译好的库)和contrib源码包(对应版本怎么下载????) 软件: contirb包: 1.先把软件解压,在目录新建mybuild文件夹,用于输出保存自定义VS工程 ...

  3. vue获取路由中的值

    vue中获取路由中的值 在vue中如何获取路由中的值呢?大家先看下面这段代码: this.$route.params && this.$route.params.id 这行代码就是在v ...

  4. testNG优雅的使用注解让你的测试项目开发更高效!

    testNG大部分是通过xml配置测试类和监听类 但是这种方法就像传统的spring框架一样需要引入大量的xml配置信息,而且在各层之间也需要通过new对象传递.如果testNG能使用注解注入bean ...

  5. Python+Django实现微信扫码支付流程

    Python+Django实现微信扫码支付流程 关注公众号"轻松学编程"了解更多. 获取源码可以加我微信[1257309054],文末有二维码. [微信公众号支付官网]https: ...

  6. Redis学习五(Redis 阻塞的原因及其排查方向).

    一.慢查询 因为 Redis 是单线程的,大量的慢查询可能会导致 redis-server 阻塞,可以通过 slowlog get n 获取慢日志,查看详情情况. 二.bigkey 大对象 bigke ...

  7. 3.4 MyArrayList 类的实现

    3.4 MyArrayList 类的实现 这节提供一个便于使用的 MyArrayList 泛型类的实现,这里不检测可能使得迭代器无效的结构上的修改,也不检测非法的迭代器 remove 方法. MyAr ...

  8. solr 文档一

    [在此处输入文章标题] 参考博客: http://blog.csdn.net/matthewei6/article/details/50620600 基础环境搭建 solr版本5.5.5: 一.sol ...

  9. 专业之旅——GitHub 热点速览 Vol.45

    作者:HelloGitHub-小鱼干 从入门到精通需要什么?AI-Expert-Roadmap 带你开启专业之旅,和 135k+ 高星项目 developer-roadmap 一样, AI-Exper ...

  10. 配置交换机基于接口划分VLAN(接入层设备作为网关)

    组网图形 简介 划分VLAN的方式有:基于接口.基于MAC地址.基于IP子网.基于协议.基于策略(MAC地址.IP地址.接口).其中基于接口划分VLAN,是最简单,最常见的划分方式. 基于接口划分VL ...