How can i put a card into a sliver app bar

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

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: