Flutter动画切换插件animated_switch的使用

描述

animated_switch 是一个可自定义的动画开关组件，适用于Flutter应用。它允许你自定义颜色、图标以及开/关状态下的文本。你可以像管理Material设计中的经典开关一样管理这个组件的状态。

快速开始

导入库

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

dependencies:
  animated_switch: ^latest_version

或者直接通过命令行安装：

$ flutter pub add animated_switch

基本实现

使用回调函数

最简单的使用方式是监听开关状态的变化，并执行相应的操作：

AnimatedSwitch(
  onChanged: (bool state) {
    print('turned ${(state) ? 'on' : 'off'}');
  },
),

更多可能性

修改颜色

可以轻松地改变开关的颜色：

AnimatedSwitch(    
  colorOn: Colors.blue,
  colorOff: Colors.grey,
  indicatorColor: Colors.limeAccent,
)

修改图标

可以通过设置不同的图标来丰富用户体验：

AnimatedSwitch(
  iconOff: Icons.lock_open,
  iconOn: Icons.lock,
)

创建自定义文本指示器

为开关添加自定义文本和样式：

AnimatedSwitch(    
  textOn: "On",
  textOff: "Off",
  textStyle: TextStyle(color: Colors.white, fontSize: 20),
)

示例代码

下面是一个完整的示例程序，展示了如何在一个简单的Flutter应用程序中使用animated_switch插件的各种功能：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Animated Switch Demo Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _value = false;

  void onChange() {
    setState(() {
      _value = !_value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {
                onChange();
              },
              child: const Text("ON CHANGE"),
            ),
            const Text("Simple:"),
            const SizedBox(height: 10),
            // Simple animated Switch
            const AnimatedSwitch(),
            const SizedBox(height: 30),
            const Text("Custom colors:"),
            const SizedBox(height: 10),
            // With custom colors
            const AnimatedSwitch(
              colorOn: Colors.blue,
              colorOff: Colors.grey,
              indicatorColor: Colors.limeAccent,
            ),
            const SizedBox(height: 20),
            Text("Status: ${_value ? "On" : "Off"}"),
            const SizedBox(height: 10),
            // with callback action
            AnimatedSwitch(
              value: _value,
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              },
            ),
            const SizedBox(height: 30),
            const Text("Custom Icons:"),
            const SizedBox(height: 10),
            // Custom icons
            const AnimatedSwitch(
              iconOff: Icons.lock_open,
              iconOn: Icons.lock,
            ),
            const SizedBox(height: 30),
            const Text("Custom Texts:"),
            const SizedBox(height: 10),
            // Custom texts and style
            const AnimatedSwitch(
              textOn: "On",
              textOff: "Off",
              textStyle: TextStyle(color: Colors.white, fontSize: 20),
            )
          ],
        ),
      ),
    );
  }
}

此示例创建了一个包含不同配置的AnimatedSwitch的小型应用，包括默认样式、自定义颜色、图标和文本。你可以根据需要调整这些属性以适应自己的项目需求。