Search packages, repositories and app categories

flip_carousel cover
Package detailsv0.0.3

flip_carousel

Infinite carousel with a 3D-filp animation. Both widgets and images can be assigned to the widget as inputs. Perspective and the space between cards can be modified.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
39
Likes
47
Pub points
160

Install package

flutter pub add flip_carousel

Package Overview

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

Flip Carousel is a Flutter package that provides an infinite, 3D-flip animated carousel for displaying widgets or images. It supports customizable perspective and spacing between cards, enabling immersive and interactive content presentation across multiple platforms. The carousel can be easily integrated into apps to showcase dynamic content with smooth flipping transitions. Ideal for galleries, product displays, or any UI requiring engaging card-based navigation.

Use cases

  • Interactive image galleries
  • Product showcase interfaces
  • Dynamic content sliders
  • Mobile app onboarding screens
  • Digital flipbook experiences

Key features

  • Infinite scrolling with 3D flip animation
  • Customizable perspective and card spacing
  • Supports both widgets and images as items
  • Cross-platform compatibility
  • Smooth and responsive touch interactions

Suitable for

  • Developers building interactive UIs
  • Designers seeking visually rich carousels
  • Apps requiring engaging content presentation
  • Projects targeting Android, iOS, Web, macOS, Windows, and Linux

Considerations

  • May impact performance with large datasets
  • Requires careful tuning of perspective for optimal visuals
  • Limited customization beyond basic styling
  • Best suited for moderate card counts to maintain fluidity

Original README

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

A simple infinite horizontal carousel with flip animation which can be used for both image and widgets

📱 Usage

Import package in your file

import 'package:flip_carousel/flip_carousel.dart';

Use FlipCarousel widget

FlipCarousel(items:cardItems);

Give a list of data and set the properties as you wish


List<dynamic> cardItems = [
    'https://i.ibb.co/QYdQHBw/batman2.jpg',
    'https://i.ibb.co/vwhykYp/spider1.jpg',
    'https://i.ibb.co/H4VrQS4/spider2.jpg',
    Container(color: Colors.amber, child: const FlutterLogo()),
  ];



FlipCarousel(
        items: cardItems,
          transitionDuration: const Duration(milliseconds: 400),
          isAssetImage: false,
          border: Border.all(width: 5, color: const Color(0xFFFFFFFF)),
          width: 250,
          height: 400,
          fit: BoxFit.cover,
          perspectiveFactor: 0.002,
          layersGap: 30,
          
          onChange: (int pageIndex) {
            print(pageIndex);
          },
          onTap: () {
            print("tap");
          },
        ),

Customization

  • You can add both widgets and ImageUrls as input.
  • make sure that you have set the the [ isAssetImage ] value base on your source.

Here is the rest of properties that can be modyfied


  /// List of image/widgets to be shown in the carousel; Accepts two types of link.
  /// For example: `https://...jpg` for online images and `assets/...` for local images.
  final List<dynamic> items;

  /// Specifies the type of image addresses in [imagesLink].
  /// Must be `false` if [imagesLink] contains online images.
  /// Must be `true` if [imagesLink] contains local images.
  final bool assetImage;

  /// Set as the image slider [width].
  /// Defaults to 300.
  final double width;

  /// Set as the image slider [height].
  /// Defaults to 450.
  final double height;

  /// Returns the page index after animation is done .
  final Function(int pageIndex)? onChange;

  /// Runs the given code onPress .
  final Function()? onTap;

  /// Set as the main frames [backgroundColor].
  final Color? backgroundColor;

  /// Determines the value of the [fit] property of the images
  /// Defaults to BoxFit.cover.
  final BoxFit fit;

  /// Determines the space between two [H3DCard].
  /// Defaults to 30.
  final double layersGap;

  /// Determines the perspective transformation of the [H3DCard] when being animated.
  /// Defaults to 0.0015.
  final double perspectiveFactor;

  /// Determines the space between two [H3DCard].
  /// Defaults to 30.

  final BoxBorder? border;

  /// Determines the [borderRadius] of the [H3DCard].
  /// Defaults to 30.

  final BorderRadius borderRadius;

  /// Determines the clip behaviour of the child widget.
  /// Defaults to [Clip.hardEdge].

  final Clip childClip;

  /// Determines [Duration] of transition animation.
  /// Defaults to 500 milliseconds.
  final Duration transitionDuration;

  /// Determines [Visibility] of the transition arrows.
  /// Defaults to True.

  final bool arrowControllersVisibility;

  /// Determines [Color] of the transition arrows.
  /// Defaults to [Colors.white].
  final Color arrowControllersColor;

  /// Determines [tag] of the selected  [H3DCard].
  final String heroTag;

```#

Categories

Source repository

Projects using this package

No data available yet.