How do I keep showing just the 'bottom' property of the Sliver App Bar so it doesn't hide on scroll when the bar itself minimizes?
As seen in the screenshot, I want to keep showing the blue progress bar when the app bar is hidden. In my code, the bottom property is outside the flexibleSpace block to try to achieve that.
Widget _buildSliverAppBar(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverAppBar(
actions: actionWidgets,
**bottom: const ProgressIndicatorWidget(),**
expandedHeight: 50.0,
flexibleSpace: FlexibleSpaceBar(
title: _buildAppTitle(context),
centerTitle: centerTitle,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return sliverBody;
},
childCount: 20,
),
),
]
);
}
Thank you
You can try this little trick. Instead of putting the ProgressIndicatorWidget
at your app bar's bottom, you can make it as a SliverPersistentHeader
inside CustomScrollView
/slivers[]
.
Example:
SliverPersistentHeader(
pinned: true, // <---- IMPORTANT!
delegate: YourDelegateImpl(...),
)
YourDelegateImpl
is the implementation of abstract class SliverPersistentHeaderDelegate
. It's kinda simple, you can code like this:
import 'package:flutter/material.dart';
class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
const CustomSliverDelegate({
required this.builder,
required this.height,
});
final WidgetBuilder builder;
final double height;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return builder(context);
}
@override
double get maxExtent => height;
@override
double get minExtent => height;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
true;
}
Then, you will pass your ProgressIndicatorWidget in the builder function