flutter_sticky_headers icon indicating copy to clipboard operation
flutter_sticky_headers copied to clipboard

Stick to visible content

Open rorystephenson opened this issue 4 years ago • 0 comments

First things first, thank you very much for this package. It's very useful functionally and I also found the code a pleasure to read in the sense that it's simple to understand despite the fact that I'm not at all familiar with these kinds of widgets and extending RenderBox. Well commented and intelligently structured.


This PR adds an option to start scrolling the header once the bottom of the body is visible rather than remaining sticky until the header no longer fits in the visible content. I made this tweak for my own purposes but perhaps it can be useful to others, if not at least an example for anyone requesting similar behaviour. I found the naming tricky so I'm open to suggestions on that!

I use sticky headers to show an image that is relevant to just a few rows that follow it (some rows don't have an associated image). My motivation for using sticky headers is to make sure the image is completely visible for all of the associated rows and since the image takes up quite a bit of visual real estate I want it to scroll out of the way as soon as the last associated list item is completely visible.

Here's the ListView builder:

    ListView.builder(
      itemBuilder: (context, i) {
        if (routeGroups[i] is TopoGroup) {
          TopoGroup topoGroup = routeGroups[i];

          return StickyHeader(
            stickToVisibleContent: true,
            header: Container(
              height: widgetSize.height / 3,
              child: GalleryImage(topoGroup.topoList.first, tappedRouteNum),
            ),
            content: Column(
              children: topoGroup.routes
                  .map<Widget>((route) => _tileFor(route, hasTopo: true))
                  .toList(),
            ),
          );
        } else {
          SectorRoute route = routeGroups[i];

          return _tileFor(route);
        }
      },
      itemCount: routeGroups.length,
    );

rorystephenson avatar May 15 '20 08:05 rorystephenson