sliverbar_with_card 0.1.1

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
height	Double	The height of background image	-
background	Image	The image of background	-
title	Text	The text of title	-
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