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 |
