nested_scroll_controller

Pub Version

A widget used to allow for controlling a NestedScrollView like it was a regular scroll view.
This is a small library which empowers you to control the offset of a NestedScrollView just like you would a regular scroll view:

  • animate to an offset or an index
  • jump to an offset or an index
  • add listeners to the total offset

Usage

See example.
To utilize NestedScrollController there are five main steps:

    /// 1. Create the [NestedScrollController].
    final NestedScrollController nestedScrollController = NestedScrollController();
    NestedScrollView(
        /// 2. Set the controller of the [NestedScrollView] to the nestedScrollController.
        controller: nestedScrollController,
        /// 3. Wrap the body of the [NestedScrollView] in a [LayoutBuilder].
        ///
        /// NOTE: if [nestedScrollController.centerScroll] is false (defaults to true),
        ///       then [constraints] is not needed and a [Builder] can be used instead of
        ///       the [LayoutBuilder].
        body: LayoutBuilder(
            builder: (context, constraints) {
                /// 4. Enable scrolling and center scrolling.
                ///
                /// NOTE: Only call [enableCenterScroll] if 
                ///       [nestedScrollController.centerScroll] is true (defaults to true).
                nestedScrollController.enableScroll(context);
                nestedScrollController.enableCenterScroll(constraints);
                ListTile(
                    title: Text('Item $index'),
                    onTap: () {
                    /// 5. Use the [NestedScrollController] anywhere (after step 4).
                        nestedScrollController.nestedAnimateToIndex(
                            index,
                            itemExtent: itemExtent,
                        );
                    }
                );
                                      

Ofcourse, you can add/remove listeners just like a regular scroll controller:

    nestedScrollController.addListener(() {
      print("Outer: ${nestedScrollController.offset}");
      print("Inner: ${nestedScrollController.innerOffset}");
      print("Total: ${nestedScrollController.totalOffset}");
    });

Result

See the example result here.

Libraries

nested_scroll_controller