How to scroll SingleChildScrollView programmatically? - uiscrollview

Question

How to scroll SingleChildScrollView programmatically?
On long Form, it is desirable to automatically scroll to a require input field.

Answer 1

Use ScrollController to scroll inside Column or ListView
Examples:
Colum With SingleChildScrollView
class ScrollContainerPage extends StatelessWidget {
ScrollController _scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ScrollView Example'),
),
body: SingleChildScrollView(
controller: _scrollController,
child: ListView(
children: [
RaisedButton(
onPressed: () {
/// Scroll maximum end, if you want you can give hardcoded values also in place of _scrollController.position.maxScrollExtent
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: Duration(milliseconds: 500),
curve: Curves.ease);
},
child: Text('Scroll To Bottom'),
),
SizedBox(height: 20,),
Container(height: 200, color: Colors.red,),
SizedBox(height: 20,),
Container(height: 200, color: Colors.blue,),
SizedBox(height: 20,),
Container(height: 200, color: Colors.green,),
SizedBox(height: 20,),
Container(height: 200, color: Colors.yellow,),
SizedBox(height: 20,),
],
),
),
);
}
}
ListView
class ScrollContainerPage extends StatelessWidget {
ScrollController _scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ScrollView Example'),
),
body: ListView(
controller: _scrollController,
children: [
RaisedButton(
onPressed: () {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: Duration(milliseconds: 500),
curve: Curves.ease);
},
child: Text('Scroll To Bottom'),
),
SizedBox(height: 20,),
Container(height: 200, color: Colors.red,),
SizedBox(height: 20,),
Container(height: 200, color: Colors.blue,),
SizedBox(height: 20,),
Container(height: 200, color: Colors.green,),
SizedBox(height: 20,),
Container(height: 200, color: Colors.yellow,),
SizedBox(height: 20,),
],
),
);
}
}
Note: Only thing need to make sure that ScrollController assigned to respective widget

Answer 2

There are multiple solutions :
Using ScrollController: Assign it to controller field of your SingleChildScrollView. And use myScrollController.animateTo or myScrollController.jumpTo
Use static methods of Scrollable. Possibly Scrollable.ensureVisible. But be aware that the context parameter is the context of the widget that needs to be visible. You can get that context by using GlobalKey.