How to use it in NestedScrollView?

[pengboboer]

I need to use it in NestedScrllView because I want to have a custom view at the top of the list, and multiple views can hover at the top of the page, not just the Table Header. I want both the vertical Table Header and my Persistent Header to hover at the top of the page when scrolling up.

But I found several issues:

1. When I slide the body, the body does not push the header up and multiple views do not stick together

2. When I slid to the top, the Table Header did not hover at the top of the page

3. When there is very little data in the list, sliding the list upwards will obscure the body's view by the PersistentHeader

I have found that these issues can lead to extremely poor user experience, which cannot meet our requirements at all.

Has the author ever thought about the handling of NestedScrollView?

I am currently solving these problems, and if there are any solutions, I will share them.

my code:

import 'package:flutter/material.dart';
import 'package:table_sticky_headers/table_sticky_headers.dart';

/// @author: pengboboer
/// @createDate: 2023/4/27
class NestedScrollViewDemoPage extends StatelessWidget {
  NestedScrollViewDemoPage({
    required this.data,
    required this.titleColumn,
    required this.titleRow,
  });

  final List<List<String>> data;
  final List<String> titleColumn;
  final List<String> titleRow;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NestedScrollView with '),
        backgroundColor: Colors.amber,
      ),
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => _buildHeadWidget(context),
        body: StickyHeadersTable(
          columnsLength: titleColumn.length,
          rowsLength: titleRow.length,
          columnsTitleBuilder: (i) => Text(titleColumn[i]),
          rowsTitleBuilder: (i) => Text(titleRow[i]),
          contentCellBuilder: (i, j) => Text(data[i][j]),
          legendCell: Text('Sticky Legend'),
        ),
      )
    );
  }

  List<Widget> _buildHeadWidget(BuildContext context) {
    return [
      SliverToBoxAdapter(
        child: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(vertical: 100, horizontal: 30),
          color: Colors.yellow,
          child: Text("header", style: TextStyle(fontSize: 65, fontWeight: FontWeight.bold),)
      ),),
      SliverPersistentHeader(
        pinned: true,
        delegate: CommonSilverAppBarDelegate(
          Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                    padding: EdgeInsets.symmetric(vertical: 30),
                    child: Text("persistentHeader", style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),))
                // _buildHeadTabRowWidget()
              ],
            ),
          ),
          height: 100,
        ),
      ),

    ];
  }
}



class CommonSilverAppBarDelegate extends SliverPersistentHeaderDelegate {
  CommonSilverAppBarDelegate(this._tabBar, {this.height = 100});

  final Widget _tabBar;

  final double height;

  @override
  double get minExtent => height;

  @override
  double get maxExtent => height;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

[pengboboer]

I think TabHeader should also be in the SliverPersistentHeader of NestedScrollView, so that it can be suspended to the top.

It may be necessary to deal with the horizontal sliding connection between the body and the header separately.

[pengboboer]

@AlexBacich

[pengboboer]

For the above three problems, I found a solution. I chose to take out the list header in the source code and put it into the PersistentHeader of NestedScrollView, and then use a combination of SliverOverlapAbsorber + SliverOverlapInjector to solve the problem that PersistentHeader blocks the body view.

list data less

[pengboboer]

@AlexBacich This is my fork project, I hope it can help everyone

https://github.com/pengboboer/sticky-headers-table

[AlexBacich]

@pengboboer , well done!

[rj76]

Thank you for the fork @pengboboer, I'm using it right now. Quick question if you don't mind: I have a SliverList beneath the table, and the sticky header remains visible when scrolling down the list. What should I do to make that header also disappear based on the scrolling of the SliverList.

[pengboboer]

@rj76
Is there a list under the table? Can you take a screenshot of the page and I can do my best to help you find a solution.

[rj76]

Thank you :)

The first image is without any scrolling and the header expanded.

The second image is when I scroll down the SliverList.

I would like the sticky header defined here to also colapse at some scroll position.

[pengboboer]

@rj76 Do you mean that when the sliverlist slides again, the week and field areas also need to shrink?

[rj76]

Yes, the headers of the table in particular. The week should remain sticky.

[pengboboer]

@rj76
I'm not sure how your code was written. I think you can split the areas of week and field into two SliderPersistentHeaders and listen for the scrolling position. When scrolling to a certain position, you can change the pinned property of the SliderPersistentHeader where the field area is located and set it to false. This is the solution I can currently think of. You can try it out.

[rj76]

Alright! That sounds like a logical thing to try. Thank you :)