关于flutter:Flutter-实战酷炫的开关动画效果

6次阅读

共计 989 个字符，预计需要花费 3 分钟才能阅读完成。

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