sliverbar_with_card

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das die Erstellung eines SliverAppBars mit einem Card-Element vereinfacht, das eingebettete Aktionen- und Zurück-Buttons enthält und ideal für die Anzeige von Katalogartikeln in einer scrollbaren Liste ist. Es verbessert die Benutzererfahrung durch die Kombination einer einklappbaren App-Bar mit einem visuell hervorstechenden Card-Container, perfekt für Produkt- oder Artikelauflistungen. Das Paket ist leichtgewichtig und für eine nahtlose Integration in bestehende scrollbare UIs konzipiert.

Anwendungsfälle

Produktkataloge anzeigen
Erstellen von Artikel-Detailscreens
Scrollbare Listen-Schnittstellen erstellen
Verbesserung der Navigation in Listen
Responsive Karten-basierte Layouts gestalten
Kollabierbare Kopfzeilen mit Aktionen implementieren

Hauptmerkmale

SliverAppBar mit integriertem Karten
Eingebaute Rück- und Aktionstasten
Für scrollbaren Inhalt optimiert
Minimale Einrichtung erforderlich
Sauberer, moderner Entwurf
Anpassbare Kartenansicht

Geeignet für

Entwickler, die E-Commerce-Apps erstellen
UI-Designer, die sich auf scrollbare Schnittstellen konzentrieren
Projekte, die zusammenfaltbare App-Leisten erfordern
Apps mit katalogartiger Datenpräsentation
Teams, die wiederverwendbare Kopfzeilenkomponenten wollen

Hinweise

Beschränkt auf vertikale Scrolllayouts
Integration mit CustomScrollView erforderlich
Möglicherweise sind zusätzliche Stile für komplexe Designs erforderlich
Nicht geeignet für nicht scrollbare Kontexte
Abhängig vom Sliver-System von Flutter
Am besten in Verbindung mit Listenansichten verwendet

Original-README

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

Card Sliver App Bar

A Flutter package to create a SliverAppBar with a Card.

Inspired by FaoB's Twitter Post design.

Getting started

Wrap your content with CardSliverAppBar and set your desired options:

Basic

MaterialApp(
  home: Material(
    child: CardSliverAppBar(
        height: 300,
        background: Image.asset("assets/logo.png"),
        title: Text("The Walking Dead"),
        body: Container()
    )
  )
)

With options

MaterialApp(
  home: Material(
    child: CardSliverAppBar(
        height: 300,
        background: Image.asset("assets/logo.png", fit: BoxFit.cover),
        title: Text("The Walking Dead",
            style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
        ),
        titleDescription: Text("Drama, Action, Adventure, Fantasy, \nScience Fiction, Horror, Thriller",
            style: TextStyle(color: Colors.black, fontSize: 11)
        ),
        card: AssetImage("assets/card.jpg"),
        backButton: true,
        backBottonColors: [Colors.white, Colors.black],
        action: IconButton(
          icon: Icon(Icons.favorite),
          iconSize: 30.0,
          color: Colors.red,
          onPressed: (){},
        ),
        body: Container()
    )
  )
)

Options

Property	Type	Description	Default
`required` height	Double	The height of background image	-
`required` background	Image	The image of background	-
`required` title	Text	The text of title	-
`required` body	Widget	The body of this widget	-
titleDescription	Text	The short description of title	`null`
backButton	Boolean	If has backButton	`false`
backButtonColors	List	The colors of backButton when open and closed	`Colors.white`
action	Widget	The action between appBar and background	`null`
card	ImageProvider	The image of card	`null`

Pakete, Repositories und App-Kategorien suchen

Paket installieren