fluttersliverappbar

Hide to keep showing bottom of Sliver App Bar


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,
        ),
      ),
    ]
  );
}

enter image description here

Thank you


Solution

  • 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