flutter How do I display `floating: true` as much as the Widget height size in SliverAppBar? (in CustomScrollView)

Question

I create a list scroll with CustomScrollViews in Flutter.

I want

• 1st and 3rd row is fix
• The 2rd row should be hide
• When scrolling down, the widget(=2rd row) is fully displayed without breaking.

screen shot

App Action Video

(+ Little height when scrolling downward issue ) https://user-images.githubusercontent.com/51875059/104626582-6ce87e00-56d9-11eb-80c1-1dffd997927a.MP4

code

@override
  Widget build(BuildContext context) {
    final list = List<int>.generate(100, (i) => i + 1);
    return CandySafeScaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            flexibleSpace: ATimelineTop(),
            elevation: 0.5,
          ),
          SliverAppBar(
            floating: true,
            flexibleSpace: _buildSearchFilter(context),
            expandedHeight: 60,
            elevation: 0.5,
          ),
          SliverAppBar(
            pinned: true,
            flexibleSpace: _buildBodyTop(context),
            elevation: 0.5,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, idx) {
                return ListTile(title: Text(list[idx].toString()));
              },
              childCount: list.length,
            ),
          )
        ],
      ),
    );

Answer 1

Try this, create persist sliver header class first and apply to the sliverAppBar:

class _SliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  _SliverTabDelegate(this.minHeight, this.maxHeight, this.child);

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

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => maxHeight;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Theme.of(context).primaryColor,
      height: max(maxHeight - shrinkOffset, minHeight),
      child: Container(
        color: Theme.of(context).primaryColor,
        child: PreferredSize(
          preferredSize: Size.fromHeight(30),
          child: child,
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(_SliverTabDelegate oldDelegate) {
    return false;
  }
}

where you put your header:

slivers: [
  SliverPersistentHeader(
      pinned: true,
      delegate: _SliverTabDelegate(
        46,
        46,
        SliverAppBar() or AppBar()
...
  SliverPersistentHeader(
      pinned: true,
      delegate: _SliverTabDelegate(
        46,
        46,
        SliverAppBar() or AppBar()
]