【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】:

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值