Flip Animation

A powerful and customizable Flutter package for creating stunning flip animations. This package provides smooth flip animations for widgets with support for different directions and customization options.

Features

  • 🔄 Smooth flip animations
  • 🎯 Multiple flip directions (horizontal, vertical, diagonal)
  • âš¡ Customizable animation duration and curves
  • 🎨 Built-in flip card widget
  • 🎮 Easy to use API
  • 📱 Responsive and performant

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flip_animation: ^0.0.1

Usage

Basic Flip Animation

FlipAnimation(
  frontWidget: Container(
    color: Colors.blue,
    child: Center(child: Text('Front')),
  ),
  backWidget: Container(
    color: Colors.red,
    child: Center(child: Text('Back')),
  ),
)

Using FlipCard

FlipCard(
  front: Text('Front Side'),
  back: Text('Back Side'),
  width: 200,
  height: 300,
  flipDirection: FlipDirection.horizontal,
  flipAxis: FlipAxis.y,
  duration: Duration(milliseconds: 800),
  autoReverse: true,
  onFlipComplete: () {
    print('Flip completed!');
  },
)

Customization Options

The package offers various customization options:

  • flipDirection: Choose between horizontal, vertical, or diagonal flips
  • flipAxis: Specify the axis of rotation (X, Y, or both)
  • duration: Set the animation duration
  • curve: Customize the animation curve
  • reverse: Enable auto-reverse animation
  • onFlipComplete: Handle flip completion callback

Example

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

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: FlipCard(
        front: Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              'Tap to Flip',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        back: Container(
          color: Colors.red,
          child: Center(
            child: Text(
              'Hello World!',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        width: 200,
        height: 300,
        flipDirection: FlipDirection.horizontal,
      ),
    );
  }
}

Contributing

Feel free to contribute to this project by creating issues or submitting pull requests. All contributions are welcome!

License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

flip_animation