mathiasgodwin / sliverbar_with_card

A Flutter package to create a SliverAppBar with a Card.

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