Search categories, packages and repositories

ducafecatFlutter ecosystem guide
Package detailsv1.0.1

flip_panel

A package for flip panel with built-in animation

pub.dev API documentation Source code
30-day downloads
224
Likes
112
Pub points
30

Install package

flutter pub add flip_panel

Package Overview

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

Flip Panel is a Flutter package that provides a smooth, animated flip panel widget with built-in transitions. It enables developers to create interactive card-like interfaces that flip between front and back faces, ideal for displaying additional information or content layers. The package supports customizable animations and is designed for simplicity and performance. It's particularly useful in app interfaces requiring dynamic visual feedback, such as profile cards, product details, or educational tools.

Use cases

  • Interactive card interfaces
  • Product detail displays
  • Educational flashcards
  • Profile card flips
  • Dynamic UI transitions

Key features

  • Built-in flip animation
  • Customizable front and back content
  • Smooth transition effects
  • Easy integration with existing widgets
  • Lightweight and performant

Suitable for

  • Developers building interactive UIs
  • Apps needing card-flip interactions
  • Educational or gaming applications
  • Simple yet engaging animations

Considerations

  • Limited to 2D flipping only
  • No support for complex 3D transformations
  • Requires manual handling of state management
  • Not optimized for high-frequency flipping
  • No built-in gesture recognition

Original README

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

Flip Panel

pub package

A package for flip panel with built-in animation

How to use

import 'package:flip_panel/flip_panel.dart';

Create a flip panel from iterable source:

final digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

FlipPanel.builder(
    itemBuilder: (context, index) => Container(
       color: Colors.black,
       padding: const EdgeInsets.symmetric(horizontal: 6.0),
       child: Text(
         '${digits[index]}',
         style: TextStyle(
             fontWeight: FontWeight.bold,
             fontSize: 50.0,
             color: Colors.white),
       ),
     ),
    itemsCount: digits.length,
    period: const Duration(milliseconds: 1000),
    loop: 1,
)

Create a flip panel from stream source:

FlipPanel<int>.stream(
      itemStream: Stream.periodic(Duration(milliseconds: 1000), (count) => count % 10),
      itemBuilder: (context, value) => Container(
        color: Colors.black,
        padding: const EdgeInsets.symmetric(horizontal: 6.0),
        child: Text(
          '$value',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 50.0,
            color: Colors.white
          ),
        ),
      ),
      initValue: 0,
  );

Categories

ImageAnimation & Transition

Source repository

Projects using this package

No data available yet.