Pakete, Repositories und App-Kategorien suchen

Cover von flip_carousel
Paketdetailsv0.0.3

flip_carousel

Unendlicher Karussell mit 3D-Drehanimation. Sowohl Widgets als auch Bilder können als Eingaben dem Widget zugewiesen werden. Perspektive und Abstand zwischen den Karten können angepasst werden.

AndroidiOSWebmacOSWindowsLinux
30-Tage-Downloads
39
Likes
47
Pub-Punkte
160

Paket installieren

flutter pub add flip_carousel

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Flip Carousel ist ein Flutter-Paket, das einen unendlichen, 3D-Dreh-animierten Karussell für die Anzeige von Widgets oder Bildern bereitstellt. Es unterstützt anpassbare Perspektive und Abstände zwischen den Karten und ermöglicht eine immersive und interaktive Inhaltspräsentation über mehrere Plattformen hinweg. Der Karussell kann problemlos in Apps integriert werden, um dynamische Inhalte mit reibungslosen Drehübergängen darzustellen. Ideal für Galerien, Produktanzeigen oder jede Benutzeroberfläche, die ansprechende kartenbasierte Navigation erfordert.

Anwendungsfälle

  • Interaktive Bildgalerien
  • Produktpräsentations-Schnittstellen
  • Dynamische Inhaltsschieber
  • Onboarding-Bildschirme für mobile Apps
  • Digitale Flipbook-Erlebnisse

Hauptmerkmale

  • Endloses Scrollen mit 3D-Kippanimation
  • Anpassbare Perspektive und Kartenabstand
  • Unterstützt sowohl Widgets als auch Bilder als Elemente
  • Plattformübergreifende Kompatibilität
  • Glatte und reaktionsfähige Touch-Interaktionen

Geeignet für

  • Entwickler, die interaktive Benutzeroberflächen erstellen
  • Designer, die visuell reichhaltige Karussells suchen
  • Apps, die eine ansprechende Inhaltpräsentation erfordern
  • Projekte für Android, iOS, Web, macOS, Windows und Linux

Hinweise

  • Kann die Leistung bei großen Datensätzen beeinträchtigen
  • Erfordert sorgfältige Abstimmung der Perspektive für optimale Grafik
  • Eingeschränkte Anpassung über die grundlegende Gestaltung hinaus
  • Am besten geeignet für moderate Kartenanzahlen, um Flüssigkeit zu gewährleisten

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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;

```#

Kategorien

Quell-Repository

Projekte, die dieses Paket verwenden

Noch keine Daten verfügbar.