vertical_card_pager

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das Entwicklern ermöglicht, dynamische, visuell ansprechende vertikale Karten-Pager zu erstellen. Es unterstützt reibungsloses Scrollen und interaktive Kartenübergänge und ist ideal für die Darstellung von Inhalten auf mehreren Ebenen auf ansprechende Weise. Für Android, iOS und Web entwickelt, verbessert es die Benutzererfahrung durch elegante Animationen und responsive Layouts. Das Paket ist besonders nützlich für Apps, die eine immersive kartenbasierte Navigation oder Inhaltspräsentation erfordern.

Anwendungsfälle

Interaktive Produktpräsentationen
Benutzerprofil-Schieberegler
Inhaltskarussells
Lern-App-Oberflächen
Medien-Browsing-Erfahrungen

Hauptmerkmale

Glatte vertikale Kartenübergänge
Anpassbare Kartenansicht
Reaktives Design über Plattformen hinweg
Unterstützung für Touch-Gesten
Eingebaute Animationseffekte

Geeignet für

Mobile- und Web-App-Entwickler
designorientierte Anwendungen
Kartenbasierte UI-Implementierungen
Apps mit reichhaltigem visuellen Inhalt

Hinweise

Kann eine Leistungsoptimierung für große Datensätze erfordern
Beschränkte Anpassungsmöglichkeiten für komplexe Layouts
Abhängig von stabiler Gestenverarbeitung auf allen Plattformen

Original-README

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

Use dynamic and beautiful card view pagers to help you create great apps.

Preview

Alignment

Left	Center(Default)	Right

Installing

Add dependency to pubspec.yaml

Get the latest version in the 'Installing' tab on pub.dartlang.org

dependencies:
    vertical_card_pager: ^1.6.0

Import the package

import 'package:vertical_card_pager/vertical_card_pager.dart';

Adding VerticalCardPager

With optional parameters

  @override
  Widget build(BuildContext context) {
    final List<String> titles = ["RED", "YELLOW", "BLACK", "CYAN", "BLUE", "GREY", ];

    final List<Widget> images = [
      Container(
        color: Colors.red,
      ),
        Container(
        color: Colors.yellow,
      ),
        Container(
        color: Colors.black,
      ),
        Container(
        color: Colors.cyan,
      ),
        Container(
        color: Colors.blue,
      ),
        Container(
        color: Colors.grey,
      ),
    ];
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                child: VerticalCardPager(
                  titles: titles,  // required
                  images: images,  // required
                  textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), // optional
                  onPageChanged: (page) { // optional
                  },
                  onSelectedItem: (index) { // optional
                  },
                  initialPage: 0, // optional
                  align : ALIGN.CENTER, // optional
                  physics : ClampingScrollPhysics() // optional 
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

How to use

Check out the example app in the example directory or the 'Example' tab on pub.dartlang.org for a more complete example.

Example on Web

https://origogi.github.io/Vertical_Card_Pager/#/

Reference

This package's animation is inspired from from this Dribbble art.

Kategorien, Pakete und Repositories suchen

Paket installieren