Flutter实战教程之酷炫的开关动画效果

187 阅读 0 评论 124 点赞

我是靠谱客的博主爱笑大门，这篇文章主要介绍Flutter实战教程之酷炫的开关动画效果，现在分享给大家，希望可以做个参考。

前言

此动画效果是我在浏览文章时发现的一个非常酷炫的效果，于是就使用 Flutter 实现了。

更多动画效果及Flutter资源： https://github.com/781238222/flutter-do

添加依赖

在项目的 pubspec.yaml 文件中添加依赖：

复制代码

1
2
dependencies:
 wheel_switch: ^0.0.1

执行命令：

复制代码

1
flutter pub get

使用

复制代码

1
2
3
WheelSwitch(
 value: false,
)

组件默认的宽高分别是80、30，也可以指定宽高：

复制代码

1
2
3
4
5
WheelSwitch(
 value: false,
 width: 150,
 height: 50,
)

开关发生变化回调：

复制代码

1
2
3
4
5
6
WheelSwitch(
 value: false,
 onChanged: (value){
 print('WheelSwitch : $value');
 },
)

设置其轨道颜色，分为激活（开）和未激活（关）状态的颜色：

复制代码

1
2
3
4
5
6
7
WheelSwitch(
 value: false,
 width: 150,
 height: 50,
 activeTrackColor: Colors.red,
 inactiveTrackColor: Colors.green,
)

设置滑块的颜色：

复制代码

1
2
3
4
5
6
7
8
9
WheelSwitch(
 value: false,
 width: 150,
 height: 50,
 activeTrackColor: Colors.red,
 inactiveTrackColor: Colors.green,
 activeThumbColor: Colors.blue,
 inactiveThumbColor: Colors.green,
)

未激活状态（关）：

激活状态（开）：

设置文字和文字样式：

复制代码

1
2
3
4
5
6
7
8
9
WheelSwitch(
 value: false,
 width: 150,
 height: 50,
 activeText: '开',
 inactiveText: '关',
 activeTextStyle: TextStyle(color: Colors.white,fontSize: 20),
 inactiveTextStyle: TextStyle(color: Colors.cyanAccent,fontSize: 10),
)