Flutter滑动动画插件flutter_slide_animation的使用

flutter_slide_animation 是一个用于在 Flutter 中为小部件提供滑动动画效果的包。

安装

要使用此包，请在 pubspec.yaml 文件中添加 flutter_slide_animation 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_slide_animation: ^0.0.1  # 替换为最新版本

运行 flutter pub get 来获取依赖项。

开始使用

导入

首先，在你的 Dart 文件中导入该包：

import 'package:flutter_slide_animation/flutter_slide_animation.dart';

使用示例

以下是一个简单的示例，展示如何使用 flutter_slide_animation 插件来实现按钮的滑动动画效果。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Slide Animation',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 控制动画是否开始的布尔值
  bool animate = false;

  // 切换动画状态的方法
  void _animateButton() {
    setState(() {
      animate = !animate;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('滑动动画示例'),
      ),
      body: Center(
        // 使用 SlideAnimation 实现滑动动画效果
        child: SlideAnimation(
          // 控制动画是否执行
          isAnimate: animate,
          // 滑动方向（up 表示向上滑动）
          slideDirection: SlideDirection.up,
          // 被动画包裹的小部件
          child: ElevatedButton(
            onPressed: () {
              _animateButton(); // 触发动画切换
            },
            child: const Text('点击我进行动画'),
          ),
        ),
      ),
    );
  }
}