如何将小部件添加到 Sliver 应用栏区域？

Question

I would like to add widgets in the Sliver AppBar area and make it feel more natural. The AppBar gives the liberty to add images but does it have any functionalities to add up more widgets into it?

I am focusing on how to use those CircleAvatar and Text widgets on the sliver appbar.

Answer 1

You won't be able to do that with the SliverAppBar :/.

What you should do is using SliverPersistentHeader with SliverPersistentHeaderDelegate.

You'll have to write a little bit more code but no too much :).

Example:

slivers = [
  SliverPersistentHeader(
    pinned: True,
    delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 250.
    ),
  ),
  SliverList(
    delegate: SliverChildListDelegate([
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25.0),
        child: Column(
          children: ...
        ),
      )
    ]),
  ),


];

...
class _SliverAppBarDelegate extends x {
  _SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => math.max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context,
      double shrinkOffset,
      bool overlapsContent)
  {

    return new SizedBox.expand(
        child: LayoutBuilder(
            builder: (_, constraints) {
               DO WHAT YOU WANT HERE !
            }
        )
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

Answer 2

There is a sample using SliverPersistentHeader with SliverPersistentHeaderDelegate. In this sample when you scroll up the header will resized and button dissapear

slivers: <Widget>[
      makeHeader(),
      // You can put more slivers here       
],

This is the method makeHeader:

SliverPersistentHeader makeHeader() {
    return SliverPersistentHeader(
      pinned: pinned,
      floating: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 200.0,
      ),
    );
  }

And the class _SliverAppBarDelegate:

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;

  _SliverAppBarDelegate(
      {@required this.minHeight,
      @required this.maxHeight,
      this.hideButtonWhenExpanded = true});

  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final appBarSize = maxHeight - shrinkOffset;
    final proportion = 2 - (maxHeight / appBarSize);
    final photoToButton = 160 * proportion;
    final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;

    return new SizedBox.expand(
      child: Container(
        color: Colors.white,
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Positioned(
              top: 10.0,
              child: CircleAvatar(
                minRadius: 20.0,
                maxRadius: 75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
                backgroundImage: NetworkImage(
                    'https://randomuser.me/api/portraits/men/75.jpg'),
              ),
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: photoToButton,
              child: Opacity(
                opacity: percent,
                child: FlatButton(
                  onPressed: () {},
                  child: Text(
                    'Add Contact',
                    style: TextStyle(
                        color: Colors.blue, fontSize: 14.0 * proportion),
                  ),
                ),
              ),
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: appBarSize - 1.0 > 59.0 ? appBarSize - 1 : 59.0,
              child: const Divider(
                // color: Colors.grey,
                height: 1,
                thickness: 0.5,
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
            minHeight !=
                oldDelegate
                    .minHeight;
  }
}