A ListView is a scrollable collection of widgets organized linearly in Flutter.
Additionally, it is the scrolling widget that is used the most. So, we will examine what the ListView widget in Flutter is in this article.
ListViews Widgets come in the following four types:
ListView()
ListView.builder()
ListView.separated()
ListView.custom()
In our code, we sometimes need to scroll the list view to the Top or bottom (programmatically). So, in this article, We will learn how to scroll down to the bottom of a ListView in Flutter.
ScrollController _scrollController = ScrollController();
To jump listview from top to bottom, you can use the below snippet.
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
To jump listview from bottom to Top, you can use the below snippet.
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
Let’s see a complete example of a scrolling list view of both sides.
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 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(),
],
));
}
}
Output:
Conclusion:
