Flutter动画切换开关插件animated_toggle_switch的使用

简介

AnimatedToggleSwitch 是一个功能强大的Flutter插件，提供了一个可定制、可拖动且带有多种选择和平滑加载动画的动画开关。它支持LTR（从左到右）和RTL（从右到左），并且可以创建没有初始选择或垂直方向的开关。

安装

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

dependencies:
  animated_toggle_switch: ^latest_version # 替换为最新版本

然后运行 flutter pub get 来安装插件。

示例代码

以下是一个完整的示例demo，展示了如何使用 AnimatedToggleSwitch 插件来创建一个简单的动画切换开关。

主应用文件 main.dart

import 'package:animated_toggle_switch/animated_toggle_switch.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AnimatedToggleSwitch Demo',
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      home: MyHomePage(title: 'AnimatedToggleSwitch'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int value = 0;
  bool positive = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedToggleSwitch<bool>.dual(
              current: positive,
              first: false,
              second: true,
              spacing: 50.0,
              style: const ToggleStyle(
                borderColor: Colors.transparent,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    spreadRadius: 1,
                    blurRadius: 2,
                    offset: Offset(0, 1.5),
                  ),
                ],
              ),
              borderWidth: 5.0,
              height: 55,
              onChanged: (b) => setState(() => positive = b),
              styleBuilder: (b) => ToggleStyle(
                  indicatorColor: b ? Colors.red : Colors.green),
              iconBuilder: (value) =>
                  value ? Icon(Icons.coronavirus_rounded) : Icon(Icons.tag_faces_rounded),
              textBuilder: (value) =>
                  value ? Center(child: Text('Oh no...')) : Center(child: Text('Nice :)')),
            ),
            SizedBox(height: 16.0),
            AnimatedToggleSwitch<int>.rolling(
              current: value,
              values: [0, 1, 2, 3],
              onChanged: (i) => setState(() => value = i),
              iconBuilder: (value) => Icon(iconDataByValue(value)),
            ),
          ],
        ),
      ),
    );
  }

  IconData iconDataByValue(int? value) {
    switch (value) {
      case 0:
        return Icons.access_time_rounded;
      case 1:
        return Icons.check_circle_outline_rounded;
      case 2:
        return Icons.power_settings_new_rounded;
      default:
        return Icons.lightbulb_outline_rounded;
    }
  }
}

解释

1. Dual Switch: 使用 AnimatedToggleSwitch<bool>.dual 创建一个二选一的开关。
2. Rolling Switch: 使用 AnimatedToggleSwitch<int>.rolling 创建一个多选的滚动开关。
3. Icon and Text Builders: 使用 iconBuilder 和 textBuilder 自定义图标和文本内容。
4. Styling: 使用 style 和 styleBuilder 来设置开关的样式。

更多功能

• Loading Animation: 通过返回一个 Future 在 onChanged 或 onTap 中启用加载动画。
• Nullable Selection: 设置 allowUnlistedValues 为 true 可以允许无初始选择。
• Vertical Switches: 调用 .vertical() 方法将任何开关变为垂直方向。
• Custom Switches: 使用 CustomAnimatedToggleSwitch 创建完全自定义的开关。

总结

AnimatedToggleSwitch 提供了丰富的配置选项和高度的灵活性，使得开发者可以轻松创建各种类型的动画切换开关。希望这个指南能帮助你快速上手并充分利用这个强大的插件。如果你喜欢这个插件，请在 pub.dev 和 GitHub 上点赞和支持！