fluttercommunity / flutter_sticky_headers

Flutter Sticky Headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot
https://pub.dev/packages/sticky_headers
MIT License
1.1k stars 129 forks source link

Stick to visible content #37

Open rorystephenson opened 4 years ago

rorystephenson commented 4 years ago

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