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

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

flutter_toggle_animated

flutter_toggle_animated 是一个用于简化创建带有动画控制器的 Flutter 包，通过最少的努力实现各种类型的切换动画。

开始使用

这个包可以帮助你专注于动画你的切换动画 UI，而无需在 initState 中初始化太多逻辑。

使用方法

首先，你需要初始化 ToggleController 并将其添加到监听器中。这样可以在每次状态变化时调用 setState 方法。

// 初始化

ToggleController _animatedController;

[@override](/user/override)
void initState() {
  _animatedController = ToggleController(
    vsync: this, 
    animationDuration: const Duration(milliseconds: 500)
  )..addListener(() {
    setState(() {});
  });
  super.initState();
}

属性

ToggleController 提供了一些属性来帮助你获取当前动画的状态和值。

// 当前动画状态
CurrentAnimationState state  

// 当前动画值
double currentPercentOpen

方法

ToggleController 还提供了几个方法来控制动画的播放方向和状态。

// 检查当前动画是否正在向前播放
bool isOpening

// 检查当前动画是否已完成
bool isOpen

// 检查当前动画是否已关闭
bool isClosed

// 检查当前动画是否正在向后播放
bool isClosing

// 推动动画向前播放
void open()

// 推动动画向后播放
void close()

// 切换当前动画
void toggle()

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_toggle_animated 插件来创建一个带有动画切换开关的应用程序。

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late ToggleController _animatedController;

  [@override](/user/override)
  void initState() {
    _animatedController = ToggleController(
        vsync: this, 
        animationDuration: const Duration(milliseconds: 500)
      )..addListener(() {
        setState(() {});
      });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Animate Toggle"),
      ),
      body: Stack(
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () {
                _animatedController.toggle();
              },
              child: Text("Toggle"),
            ),
          ),
          FractionalTranslation(
            translation: Offset(1.0 - _animatedController.currentPercentOpen, 0.0),
            child: Align(
              alignment: Alignment.centerRight,
              child: Container(
                width: 150,
                height: double.infinity,
                color: Colors.black54,
                child: buildColumn(),
              ),
            ),
          )
        ],
      ),
    );
  }

  Column buildColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        BuildListButtons(
          icon: Icons.settings,
          txt: "Settings",
          fun: () => _animatedController.close(),
        ),
        BuildListButtons(
          icon: Icons.supervised_user_circle,
          txt: "Friends",
          fun: () => _animatedController.close(),
        ),
        BuildListButtons(
          icon: Icons.folder,
          txt: "Directory",
          fun: () => _animatedController.close(),
        ),
        BuildListButtons(
          icon: Icons.security,
          txt: "Security",
          fun: () => _animatedController.close(),
        ),
        BuildListButtons(
          icon: Icons.notifications,
          txt: "Notifications",
          fun: () => _animatedController.close(),
        ),
      ],
    );
  }

  [@override](/user/override)
  void dispose() {
    _animatedController.dispose();
    super.dispose();
  }
}

class BuildListButtons extends StatelessWidget {
  const BuildListButtons({
    Key? key,
    this.icon,
    this.txt,
    this.fun,
  }) : super(key: key);

  final IconData? icon;
  final String? txt;
  final VoidCallback? fun;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: fun,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            color: Colors.white,
            size: 40,
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            txt!,
            style: TextStyle(
                color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
          )
        ],
      ),
    );
  }
}