Search code examples
flutterdartflutter-layoutflutter-animation

Flutter : How to Automaticallly scroll to end of SingleChildScrollView


I have a SingleChildScrollView, its scrollDirection is set to Horizontal with 5 child widgets placed inside a Row Widget. I want to programmatically scroll to the last widget in the Row and when the last widget is reached(waits 2 seconds) I want to scroll backward.

SingleChildScrollView(
    scrollDirection:Axis.horizontal,
    child:Row(
            children:<Widget>[
                           Widget(),
                           Widget(),
                           Widget(),
                           Widget(),
                           Widget(),  
                         ],
            ), 
    ),

)


Solution

  • You can do it using scroll controller in following way.

      ScrollController _controller;
    
      @override
      void initState() {
        super.initState();
        _controller = ScrollController();
         WidgetsBinding.instance.addPostFrameCallback((_) {
            _controller.animateTo(
               _controller.position.maxScrollExtent,
               duration: Duration(seconds: 1), 
               curve: Curves.ease,
            )
            .then((value) async {
               await Future.delayed(Duration(seconds: 2));
               _controller.animateTo(
                  _controller.position.minScrollExtent,
                  duration: Duration(seconds: 1), 
                  curve: Curves.ease,
               );
            });
         });
      }
    
      callMeWidget() {
        return Container(
          height: 100,
          width: 100,
          color: Colors.red,
          margin: EdgeInsets.all(10),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            child: SingleChildScrollView(
              controller: _controller,
              scrollDirection: Axis.horizontal,
              child: Row(
                children: <Widget>[
                  callMeWidget(),
                  callMeWidget(),
                  callMeWidget(),
                  callMeWidget(),
                  callMeWidget(),
                ],
              ),
            ),
          ),
        );
      }