Flutter ListView: Scroll Up or Down – ScrollController Class

January 31, 2024

222

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,)
      ),
    );
  }
}