ListView is the most commonly used scrolling widget to scroll through a items of a list. It displays its children one after another in the scroll direction.
But you might have had to create a functionality where you needed to scroll to start,end and bottom of a Listview in flutter.
Let’s discuss how we can achieve the following tasks.
How to scroll to the start of a ListView in flutter?
To programmatically scroll to the start of a list. You will first need to initialize a instance of ScrollController as shown below:
ScrollController _listViewController = ScrollController();Then ,attatch this scrollController to the listview to be able to programmatically control the scroll of the ListView. Like This:
ListView.builder(
controller: _listViewController,
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
title: Text("Index : $index"),
),
);
},
),
),Now lets write the code which helps you to programatically scroll to the start of a list.Type the following code snippet:
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});The above code snippet helps you achieve the desired functionality
How to scroll to end of a ListView in flutter?
To programmatically scroll to the end of a list. You will first need to initialize a instance of ScrollController as shown below:
ScrollController _listViewController = ScrollController();Then ,attatch this scrollController to the listview to be able to programmatically control the scroll of the ListView. Like This:
ListView.builder(
controller: _listViewController,
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
title: Text("Index : $index"),
),
);
},
),
),Now let’s write the code which helps you to programatically scroll to the end of a list.Type the following code snippet:
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});The above code snippet helps you achieve the desired functionality
How to scroll to middle of a ListView in flutter?
To programmatically scroll to the middle of a list. You will first need to initialize a instance of ScrollController as shown below:
ScrollController _listViewController = ScrollController();Then ,attatch this scrollController to the listview to be able to programmatically control the scroll of the ListView. Like This:
ListView.builder(
controller: _listViewController,
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
title: Text("Index : $index"),
),
);
},
),
),Now let’s write the code which helps you to programatically scroll to the middle of a list.Type the following code snippet:
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
(_scrollController.position.maxScrollExtent/2),
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});The above code snippet helps you achieve the desired functionality
Code Sample:
class MyHomePage extends StatefulWidget
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final ScrollController _scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Coflutter'),
),
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
child: const Text('To Top'),
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
),
ElevatedButton(
child: const Text('To Middle'),
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
),
ElevatedButton(
child: const Text('To Bottom'),
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
),
],
),
Expanded(
child: ListView.builder(
controller: _scrollController,
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
title: Text("Index : $index"),
),
);
},
),
),
const Divider(),
],
));
}
}{Executing this code gives you three buttons,first button which takes you to the top of the list using listview,second button takes you to the middle of the list using listview and third button takes you to the bottom of the list using listview
Conclusion
So, in this article, we learned how to programatically scroll to the top,bottom,middle of a list in listview using scrollcontroller in flutter. You can change and update this Flutter code according to your requirement.
Wanna Level up Your Flutter game? Then check out our ebook The Complete Guide to Flutter Developement where we teach you how to build production grade cross platform apps from scratch.Do check it out to completely Master Flutter framework from basic to advanced level. Also read: