加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

【Flutter 实战】酷炫的开关动画效果

发布时间:2020-12-14 14:47:48 所属栏目:百科 来源:网络整理
导读:此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了。 更多动画效果及Flutter资源:https://github.com/781238222/flutter-do 添加依赖 在项目的 pubspec.yaml 文件中添加依赖: dependencies:wheel_switch: ^0.0.1 执行命令:

此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 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,activeTrackColor: Colors.red,inactiveTrackColor: Colors.green,)

设置滑块的颜色:

WheelSwitch(
  value: false,activeThumbColor: Colors.blue,inactiveThumbColor: Colors.green,)

未激活状态(关):

激活状态(开):

设置文字和文字样式:

WheelSwitch(
  value: false,activeText: '开',inactiveText: '关',activeTextStyle: TextStyle(color: Colors.white,fontSize: 20),inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10),)

交流

老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读