How do I add widgets to the Sliver App Bar area? - flutter

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