【Flutter 實戰】酷炫的開關動畫效果

此動畫效果是我在瀏覽文章時發現的一個很是酷炫的效果，因而就使用 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】：