此动画效果是我在浏览文章时发现的一个很是酷炫的效果,因而就使用 Flutter 实现了。
更多动画效果及Flutter资源:https://github.com/781238222/flutter-dogit
在项目的 pubspec.yaml
文件中添加依赖:github
dependencies: wheel_switch: ^0.0.1
执行命令:微信
flutter pub get
WheelSwitch( value: false, )
组件默认的宽高分别是80、30,也能够指定宽高:动画
WheelSwitch( value: false, width: 150, height: 50, )
开关发生变化回调:3d
WheelSwitch( value: false, onChanged: (value){ print('WheelSwitch : $value'); }, )
设置其轨道颜色,分为激活(开)和未激活(关)状态的颜色:code
WheelSwitch( value: false, width: 150, height: 50, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green, )
设置滑块的颜色:blog
WheelSwitch( value: false, width: 150, height: 50, activeTrackColor: Colors.red, inactiveTrackColor: Colors.green, activeThumbColor: Colors.blue, inactiveThumbColor: Colors.green, )
未激活状态(关):ci
激活状态(开):资源
设置文字和文字样式:get
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】:
![]() |
![]() |