Let's say that i have a scrollable page and inside this page i have another scrollable listview(vertical), so i want when child listview reached end, the scrollable page start moving to it's end. Also when child listview reached top, scrollable page start moving to it's top. how can do that?

here's my codes

 Widget FreshProductsShow(double pageHeight, double pageWidth) {
    return Container(
      height: pageHeight / 1.3,
      width: pageWidth,
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Card(
            child: Container(
              width: pageWidth,
              // height: pageHeight / 7,
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(10)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                textDirection: TextDirection.rtl,
                children: [
                  Image.asset(
                    "images/peper.png",
                    width: pageWidth / 4,
                    height: pageHeight / 8,
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: pageWidth / 6.3),
                    child: Column(
                      children: [
                        Padding(
                          padding: EdgeInsets.only(
                              left: pageWidth / 10, top: pageHeight / 45),
                          child: AutoSizeText(
                            "peper",
                            style: TextStyle(
                                fontSize: pageHeight / 48,
                                fontWeight: FontWeight.bold,
                                color: Color(0xff54595F)),
                          ),
                        ),

                      ],
                    ),
                  )
                ],
              ),
              alignment: Alignment.centerRight,
            ),
            elevation: 5,
          );
        },
        scrollDirection: Axis.vertical,
      ),
    );
  }

CodePudding user response：

To find the scroll position you have to use the Scroll Notification Listener NotificationListener, and using a ScrollController we can control the scroll position for each Scrollable Widget.

Here is your function converted to a StatefulWidget, and the logic implemented if I got it correctly:

class FreshProductsShow extends StatefulWidget {
  const FreshProductsShow(
      {Key? key, required this.pageHeight, required this.pageWidth})
      : super(key: key);
  final double? pageHeight;
  final double? pageWidth;
  @override
  _FreshProductsShowState createState() => _FreshProductsShowState();
}

class _FreshProductsShowState extends State<FreshProductsShow> {
  ScrollController _childScrollController = ScrollController();
  ScrollController _parentScrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: _parentScrollController,
      child: Column(
        children: [
          Container(
            color: Colors.red,
            height: 300,
          ),
          Container(
            height: widget.pageHeight! / 1.3,
            width: widget.pageWidth,
            child: NotificationListener(
              onNotification: (ScrollNotification notification) {
                if (notification is ScrollUpdateNotification) {
                  if (notification.metrics.pixels ==
                      notification.metrics.maxScrollExtent) {
                    debugPrint('Reached the bottom');
                    _parentScrollController.animateTo(
                        _parentScrollController.position.maxScrollExtent,
                        duration: Duration(seconds: 1),
                        curve: Curves.easeIn);
                  } else if (notification.metrics.pixels ==
                      notification.metrics.minScrollExtent) {
                    debugPrint('Reached the top');
                    _parentScrollController.animateTo(
                        _parentScrollController.position.minScrollExtent,
                        duration: Duration(seconds: 1),
                        curve: Curves.easeIn);
                  }
                }
                return true;
              },
              child: ListView.builder(
                controller: _childScrollController,
                itemCount: 10,
                itemBuilder: (context, index) {
                  return Card(
                    child: Container(
                      width: widget.pageWidth,
                      // height: pageHeight / 7,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        textDirection: TextDirection.rtl,
                        children: [
                          Image.asset(
                            "images/peper.png",
                            width: widget.pageWidth! / 4,
                            height: widget.pageHeight! / 8,
                          ),
                          Padding(
                            padding:
                                EdgeInsets.only(left: widget.pageWidth! / 6.3),
                            child: Column(
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(
                                      left: widget.pageWidth! / 10,
                                      top: widget.pageHeight! / 45),
                                  child: Text(
                                    "peper",
                                    style: TextStyle(
                                        fontSize: widget.pageHeight! / 48,
                                        fontWeight: FontWeight.bold,
                                        color: Color(0xff54595F)),
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                      alignment: Alignment.centerRight,
                    ),
                    elevation: 5,
                  );
                },
                scrollDirection: Axis.vertical,
              ),
            ),
          ),
          Container(
            color: Colors.red,
            height: 300,
          ),
        ],
      ),
    );
  }
}