[sheet] Scrollable and Resizable sheet cannot be open with SheetRoute

[LeGoffMael]

Hi,

I'm trying to reproduce the instagram comment sheet interaction (both resizable, scrollable and with stops).
But it seems that the sheet package doesn't handle resizing and scrolling when using SheetRoute.

In route_example_page.dart i added those lines : (i also exposed resizable and minResizableExtent in my fork for the moment)

  ListTile(
    title: const Text('Sheet resizable with initial extent'),
    onTap: () {
      Navigator.of(context).push(
        SheetRoute<void>(
          initialExtent: 0.7,
          stops: <double>[0, 0.7, 1],
          resizable: true,
          minResizableExtent: 0.7,
          builder: (BuildContext context) =>
              BookDetailsScreen(
            book: Book('Les Misérables', 'Victor Hugo'),
          ),
        ),
      );
    },
  ),
  ListTile(
    title: const Text('Sheet scrollable and resizable'),
    onTap: () {
      Navigator.of(context).push(
        SheetRoute<void>(
          // initialExtent: 0.7,
          // stops: <double>[0, 0.7, 1],
          resizable: true,
          // minResizableExtent: 0.7,
          physics: const BouncingSheetPhysics(
              overflowViewport: false),
          builder: (BuildContext context) =>
              ModalWithScroll(),
        ),
      );
    },
  ),

The first sheet (without ListView) opens correctly, but the second sheet (with ListView) cannot be opened:

RPReplay_Final1689063638.MP4

I tried to find the problem but couldn't... From what I can see in SheetPosition.setPixels, the newPixels value decreases after a short time, which leads to closing the sheet.

[vishna]

I've run into the same problem (v1.0.0) on complex pages with scrollable widgets, the sheet however was still opening for "simpler" pages... so this HACK got born:

HookBuilder(
  builder: (context) {
    // HACK ¯\_(ツ)_/¯
    // this looks weird but the sheet fails to expand for complex
    // widget trees, therefore we pretend to be simple widget for
    // the first part of the transition
    final startRender = useState(false);
    useEffect(
      () {
        Future.delayed(transitionDuration * 0.5).then((_) {
          if (context.mounted) {
            startRender.value = true;
          }
        });
        return null;
      },
      [],
    );
    
    return startRender.value ? child : const SizedBox();
  },
)

I've set transitionDuration to 300ms, provided it to sheet as well, et voila 🎉 Hopefully @jamesblasco can figure out what is up with this 🙇