How can i put a card into a sliver app bar - dart

Question

i make a sliverappbar, and i want to put a card over this sliverappbar. How can i put a card over the sliverappbar and this card collapse with the sliverappbar?
The card should stay half in appbar and half in the 'body'
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 100.0,
floating: true,
snap: true,
backgroundColor: Colors.green,
elevation: 0.0,
flexibleSpace: FlexibleSpaceBar(
title: const Text(
"test",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
centerTitle: true,
background: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 60.0,
color: Colors.black,
)
],
)
],
)
),
SliverFillRemaining(
child: new Text("data"),
)
],
),

Answer 1

You can do it using SliverPersistentHeaderDelegate and Stack widget, check my sample :
class PlayingSliversState extends State<PlayingSlivers> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: CustomScrollView(
slivers: <Widget>[
SliverPersistentHeader(
pinned: true,
floating: true,
delegate: CustomSliverDelegate(
expandedHeight: 120,
),
),
SliverFillRemaining(
child: Center(
child: Text("data"),
),
),
],
),
),
);
}
}
class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
final double expandedHeight;
final bool hideTitleWhenExpanded;
CustomSliverDelegate({
#required this.expandedHeight,
this.hideTitleWhenExpanded = true,
});
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
final appBarSize = expandedHeight - shrinkOffset;
final cardTopPosition = expandedHeight / 2 - shrinkOffset;
final proportion = 2 - (expandedHeight / appBarSize);
final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
return SizedBox(
height: expandedHeight + expandedHeight / 2,
child: Stack(
children: [
SizedBox(
height: appBarSize < kToolbarHeight ? kToolbarHeight : appBarSize,
child: AppBar(
backgroundColor: Colors.green,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
elevation: 0.0,
title: Opacity(
opacity: hideTitleWhenExpanded ? 1.0 - percent : 1.0,
child: Text("Test")),
),
),
Positioned(
left: 0.0,
right: 0.0,
top: cardTopPosition > 0 ? cardTopPosition : 0,
bottom: 0.0,
child: Opacity(
opacity: percent,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 30 * percent),
child: Card(
elevation: 20.0,
child: Center(
child: Text("Header"),
),
),
),
),
),
],
),
);
}
#override
double get maxExtent => expandedHeight + expandedHeight / 2;
#override
double get minExtent => kToolbarHeight;
#override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
}
Result: