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.
<code> 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,
),
),
]
);
}
</code>
<code> 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,
),
),
]
);
}
</code>
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
2
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:
<code>SliverPersistentHeader(
pinned: true, // <---- IMPORTANT!
delegate: YourDelegateImpl(...),
)
</code>
<code>SliverPersistentHeader(
pinned: true, // <---- IMPORTANT!
delegate: YourDelegateImpl(...),
)
</code>
SliverPersistentHeader(
pinned: true, // <---- IMPORTANT!
delegate: YourDelegateImpl(...),
)
YourDelegateImpl is the implementation of abstract class SliverPersistentHeaderDelegate. It’s kinda simple, you can code like this:
<code>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;
}
</code>
<code>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;
}
</code>
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
1