此動畫效果是我在瀏覽文章時發(fā)現(xiàn)的一個非常酷炫的效果，于是就使用 Flutter 實現(xiàn)了。
更多動畫效果及Flutter資源：https://github.com/781238222/flutter-do

添加依賴

在項目的 pubspec.yaml 文件中添加依賴：

dependencies:
    wheel_switch: ^0.0.1

執(zhí)行命令：

flutter pub get

使用

WheelSwitch(
  value: false,
)

組件默認(rèn)的寬高分別是80、30，也可以指定寬高：

WheelSwitch(
  value: false,
  width: 150,
  height: 50,
)

開關(guān)發(fā)生變化回調(diào)：

WheelSwitch(
  value: false,
  onChanged: (value){
    print('WheelSwitch : $value');
  },
)

設(shè)置其軌道顏色，分為激活（開）和未激活（關(guān)）狀態(tài)的顏色：

WheelSwitch(
  value: false,
  width: 150,
  height: 50,
  activeTrackColor: Colors.red,
  inactiveTrackColor: Colors.green,
)

設(shè)置滑塊的顏色：

WheelSwitch(
  value: false,
  width: 150,
  height: 50,
  activeTrackColor: Colors.red,
  inactiveTrackColor: Colors.green,
  activeThumbColor: Colors.blue,
  inactiveThumbColor: Colors.green,
)

未激活狀態(tài)（關(guān)）：

激活狀態(tài)（開）：

設(shè)置文字和文字樣式：

WheelSwitch(
  value: false,
  width: 150,
  height: 50,
  activeText: '開',
  inactiveText: '關(guān)',
  activeTextStyle: TextStyle(color: Colors.white,fontSize: 20),
  inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10),
)

交流

老孟Flutter博客（330個控件用法+實戰(zhàn)入門系列文章）：http://laomengit.com