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

妖狐艹你老母 2022-12-24 05:54 107阅读 0赞

![2020112706405953.png][]

> 此动画效果是我在浏览文章时发现的一个非常酷炫的效果，于是就使用 Flutter 实现了。 更多动画效果及Flutter资源：[https://github.com/781238222/flutter-do][https_github.com_781238222_flutter-do]

![20201127064059610.png][]

### 添加依赖 ###

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

dependencies:
        wheel_switch: ^0.0.1

执行命令：

flutter pub get

### 使用 ###

WheelSwitch(
      value: false,
    )

![20201127064059849.png][]

组件默认的宽高分别是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,
    )

![20201127064100188.png][]

设置滑块的颜色：

WheelSwitch(
      value: false,
      width: 150,
      height: 50,
      activeTrackColor: Colors.red,
      inactiveTrackColor: Colors.green,
      activeThumbColor: Colors.blue,
      inactiveThumbColor: Colors.green,
    )

未激活状态（关）：

![20201127064100459.png][]

激活状态（开）：

![20201127064100687.png][]

设置文字和文字样式：

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

![2020112706410150.png][]

## 交流 ##

老孟Flutter博客（330个控件用法+实战入门系列文章）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[2020112706405953.png]: /images/20221120/618a9455eb4b4511ae330e33c9f9d7db.png
[https_github.com_781238222_flutter-do]: https://github.com/781238222/flutter-do
[20201127064059610.png]: /images/20221120/48ab1410434f4baa8918d8fe12b5fe18.png
[20201127064059849.png]: /images/20221120/9d2304aabec6425fba508eb936fc2739.png
[20201127064100188.png]: /images/20221120/fd455ea869f847b28f6ea59daf390e37.png
[20201127064100459.png]: https://img-blog.csdnimg.cn/20201127064100459.png
[20201127064100687.png]: https://img-blog.csdnimg.cn/20201127064100687.png
[2020112706410150.png]: https://img-blog.csdnimg.cn/2020112706410150.png
[http_laomengit.com]: http://laomengit.com