Flutter: How to make a Card overlap the AppBar?

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.

Ejector

Use docs.flutter.io/flutter/widgets/Stack-class.html – Ermelindaermengarde

@Idol not that easy. As usually in this situation, you want the appbar to scroll too. – Hexagram

@Ejector I don't think this is possible out of the box for now. You chould partially achieve this using a CustomScrollView and a FlexibleSpace appbar. – Hexagram

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.

Olds

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;
}

Thyroid