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

【Flutter 实战】酷炫的开关动画效果,第1张

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

此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 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,activeTrackcolor: colors.red,inactiveTrackcolor: colors.green,)

设置滑块的颜色:

WheelSwitch(  value: false,activeThumbcolor: colors.blue,inactiveThumbcolor: colors.green,)

未激活状态(关):

激活状态(开):

设置文字和文字样式:

WheelSwitch(  value: false,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 实战】酷炫的开关动画效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1000439.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存