parallax_cards

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

ParallaxCards ist ein Flutter-Paket, das reibungslose Scroll-Parallax-Effekte und anpassbare Kartenüberlagerungen in Ihrer App ermöglicht. Es steigert die Benutzerengagement durch dynamische, visuell ansprechende Kartenübergänge, während Benutzer durch den Inhalt scrollen. Ideal für Karussells, Cover-Flows oder interaktive Galerien, unterstützt es mehrere Plattformen wie Android, iOS, macOS, Windows und Linux. Das Paket ermöglicht Entwicklern die einfache Anpassung von Karten-Aussehen, Tiefe und Animationsverhalten. Mit minimalem Setup über pub add integriert es sich nahtlos in bestehende Flutter-Projekte.

Anwendungsfälle

Interaktive Produktpräsentationen
Dynamische Bildschubslider
Engagierende Onboarding-Bildschirme
visuelle Daten-Dashboards
Mobile App-Navigationsoberflächen

Hauptmerkmale

Glatte Parallax-Scrolling
Anpassbare Kartenüberlagerungen
Plattformübergreifende Unterstützung
Einfache Integration mit pub
Konfigurierbare Tiefe und Animation
Reaktive Design-Handhabung

Geeignet für

Entwickler, die interaktive Benutzeroberflächen erstellen
Designer, die visuelle Tiefe suchen
Apps mit inhaltsreichen Karussells
Projekte, die ansprechende Scroll-Effekte erfordern
Flutter-Anfänger erkunden Animationen

Hinweise

Kann die Leistung auf Low-End-Geräten beeinträchtigen
Erfordert sorgfältige Abstimmung der Animationsparameter
Beschränkte Dokumentation über grundlegende Beispiele hinaus
Nicht für sehr große Datensätze optimiert
Am besten geeignet für moderate Kartenanzahlen

Original-README

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

Parallax Cards

A Flutter package for scrolling parallax effect and custom card overlays

Getting started

1. Depend on it

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

dependencies:
  parallax_cards: ^1.0.1

2. Install it

Install it from the command line:

$ flutter pub get

3. Import it

Now in your project you can use:

import 'package:parallax_cards/parallax_cards.dart';

Usage

ParallaxCards is a Stateless Widget which you can include in your widget tree. You can use it either vertically or horizontally by overriding the scrollDirection property:

Horizontal scroll view

ParallaxCards(
  scrollDirection: Axis.horizontal,
  imagesList: imagesList,
  width: 250,
  height: 350,
  onTap: (index) {
    log('$index pressed');
  },
),

Vertical scroll view

You can customize the card overlays according to your preferences by overriding the overlays property. However, ensure that the lengths of imageList and overlays are equal.

ParallaxCards(
                imagesList: imagesList,
                width: double.infinity,
                height: 200,
                onTap: (index) {
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                    content: Text("$index tapped"),
                    duration: const Duration(milliseconds: 500),
                  ));
                },
                overlays: [
                  for (var title in titlesList)
                    Stack(
                      children: [
                        Positioned.fill(
                          child: DecoratedBox(
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  Colors.transparent,
                                  Colors.black.withOpacity(0.8)
                                ],
                                stops: const [0.5, 0.9],
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          left: 16,
                          bottom: 12,
                          child: Text(
                            title,
                            style: const TextStyle(
                                fontSize: 22,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ],
                    )
                ],
              ),

Additional information

Feel free to open an issue if you encounter any bugs or challenges. Pull requests are welcome!

Kategorien, Pakete und Repositories suchen

Paket installieren