此动画成果是我在浏览文章时发现的一个十分酷炫的成果,于是就应用 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】: