Hi Guy’s Welcome to Proto Coders Point. In this Flutter Article let’s learn how to implement Flutter ListView Scroll Up and Scroll Down by fully controlling the listview.
Flutter is an farmware developed by Google For building Native based application for Mobile, Web and Desktop from a single codebase i.e. Dart Language. While working with application development with flutter on commonly used UI element is ListView a Flutter widget using which we can display the list of data and used scroll through the data.
Now as we are want to implement feature to our flutter listview like controlling over the scrolling the behaviour. We make use of a controller i.e. ScrollController class.
This Article will help you in implementing smooth scrolling with animation effect to the ListView i.e. Scroll Up or Scroll Down.
Video Tutorial
Let’s Understand the power of Flutter Scroll Controller
Flutter ScrollController class using which flutter developer has controller over any Flutter Scrolling Widget, such as ListView. By attaching ScrollController to ListView developer can programmatically control the Scrolling of the ListView.
Here is how to create a ScrollController & attach it to listview
ScrollController _controller = ScrollController();
Attach it to ListView
ListView(
controller: _controller,
// other ListView properties
children: [
// list items
],
)
Now as I have attached the controller with ListView we have full controller programmatically to the ListView
ListView Scroll to Bottom – Flutter
Create a ScrollController
final controller = ScrollController();
Attach the controller to listview
ListView.builder(
controller: controller, // attached the controller to listview
itemCount: items.length,
itemBuilder: (context,index){
return Card(
.......... card properties
),
);
}),
A Function to auto scroll to bottom of the listview when user perform and event like button click.
void scrollDown(){
final double goDown = controller.position.maxScrollExtent;
controller.animateTo(goDown, duration: Duration(seconds: 2), curve: Curves.easeInCirc);
}
A Button that call scrollDown function to scroll the listview to bottom
FloatingActionButton(
onPressed: scrollDown,
child: iIcon(Icons.arrow_circle_down,size: 35,)
),
ListView Scroll to Top- Flutter
Similarly a function by which user can scroll to top of the listview
void scrollUp(){
final double goUp = 0;
controller.animateTo(goUp, duration: Duration(seconds: 2), curve: Curves.easeInCirc);
}
Scrolling to Top or Bottom in Flutter ListView – Complete Source Code
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.grey),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final controller = ScrollController();
final List<String> items = List.generate(100, (index) => 'Item ${index}');
var isTopPosition = 0.0;
void scrollDown(){
final double goDown = controller.position.maxScrollExtent;
controller.animateTo(goDown, duration: Duration(seconds: 2), curve: Curves.easeInCirc);
}
void scrollUp(){
final double goUp = 0;
controller.animateTo(goUp, duration: Duration(seconds: 2), curve: Curves.easeInCirc);
}
@override
void initState() {
// TODO: implement initState
super.initState();
controller.addListener(scrollPosition);
}
void scrollPosition(){
final isTop = controller.position.pixels;
setState(() {
isTopPosition = isTop;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
controller: controller,
itemCount: items.length,
itemBuilder: (context,index){
return Card(
color: index % 2 == 0 ? Colors.white70 : Colors.black87,
child: Padding(
padding: EdgeInsets.all(18),
child: Text(items[index],style: TextStyle(fontSize: 18,color: index % 2 == 0 ? Colors.black87 : Colors.white70,),),
),
);
}),
floatingActionButton: FloatingActionButton(
onPressed: isTopPosition == 0 ? scrollDown : scrollUp,
child: isTopPosition == 0 ? Icon(Icons.arrow_circle_down,size: 35,) : Icon(Icons.arrow_circle_up,size: 35,)
),
);
}
}
Conclusion
In this Article we show how to implement Flutter ListView Scroll to bottom or scroll to top by using Flutter Scroll Controller controller class.
