sliverbar_with_card

Package Overview

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

A Flutter package that simplifies the creation of a SliverAppBar featuring a Card with embedded action and back buttons, ideal for displaying catalog items in a scrollable list. It enhances user experience by combining a collapsible app bar with a visually distinct card container, perfect for product or item listings. The package is lightweight and designed for seamless integration into existing scrollable UIs.

Use cases

Displaying product catalogs
Creating item detail screens
Building scrollable list interfaces
Enhancing navigation in lists
Designing responsive card-based layouts
Implementing collapsible headers with actions

Key features

SliverAppBar with integrated Card
Built-in back and action buttons
Optimized for scrollable content
Minimal setup required
Clean, modern design
Customizable card appearance

Suitable for

Developers building e-commerce apps
UI designers focusing on scrollable interfaces
Projects requiring collapsible app bars
Apps with catalog-style data presentation
Teams wanting reusable header components

Considerations

Limited to vertical scrolling layouts
Requires integration with CustomScrollView
May need additional styling for complex designs
Not suitable for non-scrollable contexts
Depends on Flutter's Sliver system
Best used in conjunction with list views

Original README

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

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`

Search packages, repositories and app categories

Install package