Flutter Pinned Widgets in Scrollable UI

46 views Asked by At

I am trying to create a UI where the user can tap on a widget in a scrollable viewport to select it, and have that tapped widget(s) become pinned in the scrollable viewport so that they cannot fall off the edges, but would remain in it's relative position in the scroll otherwise. (See picture for example) Visual Representation of pinned scroll UI I need the widgets in the scrollable area to be lazily drawn as the list could be potentially infinite, and each widget may have its own size that cannot be known ahead of time. The use-case would be to allow the user to make a selection in a horizontal scrollable that is itself inside of another scrollable on a different axis. enter image description here

I have tried extending SingleChildRenderObjectWidget and using render objects extending RenderSliverSingleBoxAdapter but none of it seems to work so I'm clearly doing something wrong. I've looked online and found sliver_tools on pub.dev, but that doesn't seem to support what I'm going for.

Ideally, it would be used with some sort of builder delegate like:

int pinnedIndex = 0;

// ...

SliverList(
  delegate: PinnedSliverChildBuilderDelegate(
    (context, index) => GestureDetector(
      onTap: () => setState(() => pinnedIndex = index;),
      child: Chip(label: Text('#$index')),
    ),
    pinnedIndices: <int>[pinnedIndex],
    childCount: 50,
  ),
),

or some similar approach that is broadly reusable. Any suggestions on how to accomplish this, or where to look in the documentation to understand how to go about designing something like this?

0

There are 0 answers