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