How to sync scrollController ScrollableSheet & ListView.separated in ModalSheetRoute?

[Tommy-Wang0602]

Hi ~ @fujidaiti
I use ModalSheetRoute to show ScrollableSheet,but found ListView.separated can not scroll after ScrollableSheet show up.

I except I can still scroll ListView.separated when ScrollableSheet height get to maxExtent.

    Navigator.push(
      context,
      ModalSheetRoute(
        barrierColor: Colors.transparent,
        swipeDismissible: true,
        maintainState: true,
        fullscreenDialog: true,
        barrierDismissible: true,
        builder: (context) => BlocProvider.value(
          value: context.read<CalendarBloc>(),
          child: BlocBuilder<CalendarBloc, CalendarState>(
            builder: (context, state) {
              return MobileCalendarEventBottomSheet()
    );
  }
}


class MobileCalendarEventBottomSheet extends StatelessWidget {
  
...

  @override
  Widget build(BuildContext context) {
    const maxAnchor = Extent.proportional(0.9);
    const initAnchor = Extent.proportional(0.4);
    final snappingSheetPhysics = SnappingSheetPhysics(
      snappingBehavior: SnapToNearest(snapTo: [initAnchor, maxAnchor]),
    );
    final sheetDecoration = BoxDecoration(
      color: Colors.white,
      boxShadow: [BoxShadow(color: Colors.grey, spreadRadius: 2, blurRadius: 4)],
      borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
    );
    return SafeArea(
      child: Stack(
        children: [
          ScrollableSheet(
            initialExtent: initAnchor,
            maxExtent: maxAnchor,
            minExtent: initAnchor,
            physics: snappingSheetPhysics,
            child: SheetDraggable(
              child: SheetScrollable(
                initialScrollOffset: 100,
                builder: (context, scrollController) {
                  return Container(
                    decoration: sheetDecoration,
                    child: Column(
                      children: [
                      ...
                        Expanded(
                            child: ListView.separated(
                              controller: scrollController,
                                physics: AlwaysScrollableScrollPhysics(),
                                itemBuilder: (context, index) => _buildEvent(context, index),
                                separatorBuilder: (context, index) => const SizedBox(height: 12),
                                itemCount: itemsOfDay.length))
                      ],
                    ),
                  );
                },
              ),
            ),
          ),
...
        ],
      ),
    );
  }

[fujidaiti]

Hi @Tommy-Wang0602,

                    child: Column(
                      children: [
                      ...
                        Expanded(
                            child: ListView.separated(

The ListView must fill the entire body of the ScrollableSheet. If you want to mix a ListView with non-scrollable widgets, consider using CustomScrollView and SliverToBoxAdapter.

Alternatively, if you don't need to synchronize the ListView's scroll position with the sheet's position, you can simply use a DraggableSheet.

[Tommy-Wang0602]

Thanks your reply ,and I wanna ask another question,I use NavigationSheet to build my bottomSheet,

Does it has any args when I scroll down my sheet lower than minExtent can use callback function, (e.g pop out a dialog)

[fujidaiti]

You can use SheetController or SheetNotifications to observe changes in the sheet's extent. Please refer to the tutorial code for examples.