【Flutter 实战】酷炫的开关动画效果
此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 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 实战】酷炫的开关动画效果的更多相关文章
- Flutter酷炫的路由动画效果
现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...
- Flutter 实现酷炫的3D效果
老孟导读:此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo ext ...
- [转]收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation
原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...
- [转]收集android上开源的酷炫的交互动画和视觉效果
原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...
- 使用纯 CSS 实现超酷炫的粘性气泡效果
最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突
使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...
- Android github上开源项目、酷炫的交互动画和视觉效果地址集合
Android上开源的酷炫的交互动画和视觉效果:http://blog.csdn.net/u013278099/article/details/50323689 Awesome-android-ui: ...
随机推荐
- 使用 tabindex 配合 focus-within 巧妙实现父选择器
本文将介绍一个不太实用的小技巧,使用 tabindex 配合 :focus-within 巧妙实现父选择器. CSS 中是否存在父选择器? 这是一个非常经典的问题,到目前为止,CSS 没有真正意义上被 ...
- MVC IIS 403.14
描述:HTTP Error 403.14 - Forbidden The Web server is configured to not list the contents of this direc ...
- RS485转以太网的概述和应用领域
如今随着物联网技术的不断发展,各种接口更新换代的速度非常的快,RS485转以太网的主要作用就是提供串口转TCP/IP网络接口的功能,它可以将RS232/485/422串口转换成TCP/IP网络接口,实 ...
- Django项目-个人网站之事项模块
Django项目之个人网站 关注公众号"轻松学编程"了解更多. Github地址:https://github.com/liangdongchang/MyWeb.git 感兴趣的可 ...
- python开发基础(二)运算符以及数据类型之list(列表)
# encoding: utf-8 # module builtins # from (built-in) # by generator 1.147 """ Built- ...
- 关于synchronized无法锁住Integer原因
原因 在多线程的时候,为了保证数据安全,必须在修改数据时使用线程同步,java中的synchronized用来实现线程同步.线程列队. 学完多线程基础的我,写一个多线程交替输出1,2,3,4,5... ...
- 关于H5页面在微信浏览器中音视频播放的问题
Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以视频播放的效果差异也很大,这里主要以微信为主.微信使用的是腾讯浏览器自带的X5内核. 而iOS是不允许使用第三方浏览器内核的,就是Goo ...
- FFmpeg开发笔记(九):ffmpeg解码rtsp流并使用SDL同步播放
前言 ffmpeg播放rtsp网络流和摄像头流. Demo 使用ffmpeg播放局域网rtsp1080p海康摄像头:延迟0.2s,存在马赛克 使用ffmpeg播放网络rtsp文件流 ...
- Databricks说的Lakehouse是什么?
在过去的几年里,Lakehouse作为一种新的数据管理范式,已独立出现在Databricks的许多用户和应用案例中.在这篇文章中,我们将阐述这种新范式以及它相对于之前方案的优势. 数据仓库在决策支持和 ...
- Blazor中的CSS隔离
1.环境 VS 2019 16.9.0 Preview 1.0 .NET SDK 5.0.100 2.前言 CSS一旦生效,就会应用于全局,所以很容易出现冲突.为了解决这个问题CSS隔离就顺势而生.B ...