How to control scroll position in a ScrollableSheet ?

[QuentinSc]

Hello,

I can't find a way to get the implicit ScrollController.
I tried PrimaryScrollController.of(context).

Could be usefule to trigger an animateTo to a specific offset of the scrollcontroller

Use case : scroll to a specific house in the airbnb cookbook

Thank you !

[fujidaiti]

Hi @QuentinSc,

I tried PrimaryScrollController.of(context).

I'm not sure why this isn't working. Could it be that you're using a wrong context? For reference, I tweaked the tutorial code for ScrollableSheet to obtain the implicit scroll controller using PrimaryScrollController.of, and it worked as we expected (see _SheetContent class in the following code).

Code

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

void main() {
  runApp(const _BasicScrollableSheetExample());
}

class _BasicScrollableSheetExample extends StatelessWidget {
  const _BasicScrollableSheetExample();

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        // Typically, you would use a Stack to place the sheet
        // on top of another widget.
        body: Stack(
          children: [
            Placeholder(),
            _MySheet(),
          ],
        ),
      ),
    );
  }
}

class _MySheet extends StatelessWidget {
  const _MySheet();

  @override
  Widget build(BuildContext context) {
    // Just wrap the content in a ScrollableSheet!
    final sheet = ScrollableSheet(
      child: buildSheetBackground(context, const _SheetContent()),
      // Optional: Comment out the following lines to add multiple stop positions.
      //
      // minExtent: const Extent.proportional(0.2),
      // physics: StretchingSheetPhysics(
      //   parent: SnappingSheetPhysics(
      //     snappingBehavior: SnapToNearest(
      //       snapTo: [
      //         const Extent.proportional(0.2),
      //         const Extent.proportional(0.5),
      //         const Extent.proportional(1),
      //       ],
      //     ),
      //   ),
      // ),
    );

    return SafeArea(bottom: false, child: sheet);
  }

  Widget buildSheetBackground(BuildContext context, Widget content) {
    // Add background color, circular corners and material shadow to the sheet.
    // This is just an example, you can customize it however you want.
    return Material(
      color: Theme.of(context).colorScheme.secondaryContainer,
      borderRadius: BorderRadius.circular(16),
      clipBehavior: Clip.antiAlias,
      child: content,
    );
  }
}

class _SheetContent extends StatefulWidget {
  const _SheetContent();

  @override
  State<_SheetContent> createState() => _SheetContentState();
}

class _SheetContentState extends State<_SheetContent> {
  ScrollController? _scrollController;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _scrollController?.removeListener(_debugPrintScrollPosition);
    _scrollController = PrimaryScrollController.maybeOf(context)
      ?..addListener(_debugPrintScrollPosition);
  }

  void _debugPrintScrollPosition() {
    debugPrint('Scroll position: ${_scrollController!.offset}');
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    );
  }
}

Another option is SheetScrollable, which can be used to create a new scroll controller with custom configuration. It is important to ensure that the controller is attached to the scrollable widget.

    ScrollableSheet(
      child: SheetScrollable(
        initialScrollOffset: 100,
        builder: (context, controller) {
          return ListView(controller: controller);
        },
      ),
    );

[QuentinSc]

Thank you for your answer.

How to controlle the scrollcontroller but from outside the ScrollableSheet context ?
Could be great to have the availability to give my own scrollController to the ScrollableSheet. If I provided another one just to the listview, it break the ScrollableSheet behavior (that's normal I guess).

For example on the Airbnb cookbook: on tap on the MapButton, scroll to a specific offset of the houses list

[fujidaiti]

If I provided another one just to the listview, it break the ScrollableSheet behavior (that's normal I guess).

As you said, the listview in the ScrollableSheet needs to use a special ScrollController to work properly (by default, the controller is implicitly provided to the listview by the sheet), and there is no easy way to get the controller from the outside of the sheet for now.

The following code could be a workaround, but I want to add a better solution for this usecase in the future...

// Outside of the ScrollableSheet
late ScrollController _controller;

MySheet(
  handleScrollControllerCallback: (controller) {
    // We can store the controller here for later use
    _controller = controller;
  },
);

// In the build() of MySheet widget
ScrollableSheet(
  child: SheetScrollable(
    builder: (context, controller) {
      handleScrollControllerCallback(controller);
      return ListView(...);
    },
  ),
);

[fujidaiti]

Moved to #116.