Flutter: How to make a Card overlap the AppBar? - layout

Question

How can I make a Card in Flutter that overlaps the AppBar? Negative margins are not possible as far as I know.
See the image for clarity.

Answer 1

For one card it could be easily done with Stack widget
E.g.
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
#override
HomeState createState() {
return new HomeState();
}
}
class HomeState extends State<Home> {
bool _hasCard;
#override
void initState() {
super.initState();
_hasCard = false;
}
#override
Widget build(BuildContext context) {
List<Widget> children = new List();
children.add(_buildBackground());
if (_hasCard) children.add(_buildCard());
return MaterialApp(
home: Stack(
children: children,
),
);
}
void _showCard() {
setState(() => _hasCard = true);
}
void _hideCard() {
setState(() => _hasCard = false);
}
Widget _buildCard() => new Container(
child: new Center(
child: new Container(
height: 700.0,
width: 200.0,
color: Colors.lightBlue,
child: new Center(
child: new Text("Card"),
),
),
),
);
Widget _buildBackground() => new Scaffold(
appBar: new AppBar(
title: new Text("AppBar"),
),
body: new Container(
child: _hasCard
? new FlatButton(
onPressed: _hideCard, child: new Text("Hide card"))
: new FlatButton(
onPressed: _showCard, child: new Text("Show card")),
),
);
}
void main() {
runApp(
new Home(),
);
}
If there are many cards, you can wrap them into ListView.

Answer 2

class Sample2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Material(
child: CustomScrollView(
slivers: [
SliverPersistentHeader(
delegate: MySliverAppBar(expandedHeight: 200),
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(_, index) => ListTile(
title: Text("Index: $index"),
),
),
)
],
),
),
);
}
}
class MySliverAppBar extends SliverPersistentHeaderDelegate {
final double expandedHeight;
MySliverAppBar({#required this.expandedHeight});
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
children: [
Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
fit: BoxFit.cover,
),
Center(
child: Opacity(
opacity: shrinkOffset / expandedHeight,
child: Text(
"MySliverAppBar",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 23,
),
),
),
),
Positioned(
top: expandedHeight / 2 - shrinkOffset,
left: MediaQuery.of(context).size.width / 4,
child: Opacity(
opacity: (1 - shrinkOffset / expandedHeight),
child: Card(
elevation: 10,
child: SizedBox(
height: expandedHeight,
width: MediaQuery.of(context).size.width / 2,
child: FlutterLogo(),
),
),
),
),
],
);
}
#override
double get maxExtent => expandedHeight;
#override
double get minExtent => kToolbarHeight;
#override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}