Card Sliver App Bar

Pub Pull Requests are welcome Pull Requests are welcome Codemagic build status

A Flutter package to create a SliverAppBar with a Card.

Inspired by FaoB's Twitter Post design.

Showcase

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

PropertyTypeDescriptionDefault
required heightDoubleThe height of background image-
required backgroundImageThe image of background-
required titleTextThe text of title-
required bodyWidgetThe body of this widget-
titleDescriptionTextThe short description of titlenull
backButtonBooleanIf has backButtonfalse
backButtonColorsListThe colors of backButton when open and closedColors.white
actionWidgetThe action between appBar and backgroundnull
cardImageProviderThe image of cardnull

Libraries

sliverbar_with_card