How to Automaticallly scroll to a position of a Row inside SingleChildScrollView in Flutter
Solution 1
The easiest way to doing this is using Scrollable.ensureVisible.
ensureVisible method
Scrolls the scrollables that enclose the given context so as to make the given context visible.
Please see the code below :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _value = 0;
static final List<GlobalKey> _key = List.generate(20, (index) => GlobalKey());
final List<Widget> buttons = List.generate(
20,
(index) => RaisedButton(
onPressed: () {},
color: index % 2 == 0 ? Colors.grey : Colors.white,
child: Text("Button No # ${index + 1}", key: _key[index]),
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: buttons,
),
),
DropdownButton(
value: _value,
items: List.generate(
20,
(index) => DropdownMenuItem(
child: Text("Goto Button # ${index + 1}"), value: index),
),
onChanged: (value) {
setState(() {
_value = value;
print("calling");
Scrollable.ensureVisible(_key[value].currentContext);
});
},
)
],
),
);
}
}
Solution 2
You could define a ScrollController
:
ScrollController _controller = new ScrollController();
Pass it to the SingleChildScrollView
:
SingleChildScrollView(
controller: _scrollController,
scrollDirection: Axis.horizontal,
child: Row(
children: buttons,
),
),
And programmatically scroll it as follows:
void scroll(double position) {
_scrollController.jumpTo(position);
}
Or, if a scroll animation is desired:
void scrollAnimated(double position) {
_scrollController.animateTo(position, Duration(seconds: 1), Curves.ease);
}
If you'd like to automatically scroll immediately after the layout has been built, you could do so by overriding the initState
method:
@override
void initState() {
super.initState();
WidgetsBinding.instance
.addPostFrameCallback((_) => scroll(500)); // scroll automatically 500px (as an example)
}
Comments
-
Sasank Sunkavalli over 1 year
I am using a SingleChildScrollView. Its scrollDirection is set to Horizontal with >20 child widgets placed inside a Row Widget. I want to programmatically scroll to a position widget(i.e, 5th or 6th position) in the Row. Is there any way to do it programmatically ?
SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: buttons, ), )
-
pskink over 3 yearscall
Scrollable.ensureVisible
method then
-
-
Sasank Sunkavalli over 3 yearsthis solution provides a way to scroll by a given amount of width, what i need is to scroll by position. The accepted answer above solves my purpose.