Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
flutter_flip_card cover
Package detailsv0.0.6

flutter_flip_card

A component that provides a flip card animation. It could be used for hiding and showing details of a product.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
6.8K
Likes
160
Pub points
150

Install package

flutter pub add flutter_flip_card

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that enables flip card animations, allowing users to reveal hidden content such as product details with a smooth flipping effect. Ideal for interactive UIs where information is displayed in layers, it supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux. The component is lightweight and easy to integrate, making it suitable for e-commerce apps, portfolios, or any interface requiring engaging transitions.

Use cases

  • Product detail reveal
  • Interactive learning cards
  • Portfolio item showcase
  • Game card flips
  • User profile toggles

Key features

  • Smooth flip animation
  • Customizable front and back sides
  • Cross-platform support
  • Easy integration with existing widgets
  • Configurable flip direction and speed

Suitable for

  • E-commerce applications
  • Educational apps
  • Interactive UI prototypes
  • Mobile and web dashboards
  • Gamified interfaces

Considerations

  • May impact performance on low-end devices
  • Limited customization beyond basic flip effects
  • Requires careful handling of state management
  • Not ideal for complex multi-layered animations
  • Best suited for simple, single-purpose flip interactions

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

flutter_flip_card

A widget that does transition between two children in a flipping manner.

FlipCard GestureFlipCard
FlipCard GestureFlipCard

How to Use

To use flutter_flip_card, first start by importing the package.

import 'package:flutter_flip_card/flutter_flip_card.dart';

Currently Available Methods

  • FlipCard A component that provides a flip card animation

  • GestureFlipCard A component that provides a gsture(Swipe) flip card animation

FlipCard

    FlipCard(
        rotateSide: RotateSide.bottom,
        onTapFlipping: false, //When enabled, the card will flip automatically when touched.
        axis: FlipAxis.horizontal,
        controller: con1,
        frontWidget: Center(
        child: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    'image/01.png',
                    fit: BoxFit.fitHeight)
                )
            ),
        backWidget: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    `'image/02.jpg',
                    fit: BoxFit.fitHeight)
            )
        )
        
    final controller = FlipCardController();
    // Flip the card programmatically
    controller.flipcard();

GestureFlipCard

    GestureFlipCard(
            animationDuration: const Duration(milliseconds: 300),
            axis: FlipAxis.horizontal,
            controller:cong // used to ccontrol the Gesture flip programmatically
            enableController : false // if [True] if you need flip the card using programmatically
            frontWidget: Center(
                child: Container(
                  width: 300,
                  height: 200,
                  child: Image.asset(
                    'image/011.jpg',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
            backWidget: Container(
                width: 300,
                height: 200,
                child: Image.asset(
                  'image/11.jpg',
                  fit: BoxFit.contain,
                ),
            ),
        ),
Project Created & Maintained By
Gunanithi

Passionate #Flutter, #Android Developer. #UI Designer.

linkedin medium

Notes

Please open an issue if you find any bugs.

Donate

You like the package ? Buy me a coffee :)

Buy Me A Coffee

Categories

Card & Expansion Tile

Source repository

Projects using this package