How to Get Scroll Position Offset in Flutter

In this example, we are going to show you how to get or listen to a Scroll position change and its current position offset on Scrolling widgets like SingleChildScrollView(), ListView(). See the example below:

How to Get Current Scroll Position Offset:

ScrollController scrollController = ScrollController();

Set this controller to SingleChildScrollView() or ListView():

SingleChildScrollView( 
    controller: scrollController
)

ListView(
   controller: scrollController
)

You can show show Scrollbar on SingleChildScrollView and ListView as well.

Get Current Scroll Position Offset:

print(scrollController.offset); 
//.offset is double value
/* Outputs --------
    I/flutter (26854): 32.349831321022975
    I/flutter (26854): 33.07679332386385
    I/flutter (26854): 33.80375532670473
    I/flutter (26854): 34.530717329545666
    I/flutter (26854): 35.2576793323866
    I/flutter (26854): 35.62113813920479
    I/flutter (26854): 35.984641335227536
    I/flutter (26854): 36.34810014204572
    I/flutter (26854): 36.71160333806847
    I/flutter (26854): 37.07506214488666
    I/flutter (26854): 37.80202414772759
    I/flutter (26854): 38.16552734375034
*/ 

How to Add Scroll Position Change Listener:

ScrollController scrollController = ScrollController();

scrollController.addListener(() { //listener 
  print(scrollController.offset); 
  //.offset is double value
  /* Outputs --------
      I/flutter (26854): 35.984641335227536
      I/flutter (26854): 36.34810014204572
      I/flutter (26854): 36.71160333806847
      I/flutter (26854): 37.07506214488666
      I/flutter (26854): 37.80202414772759
      I/flutter (26854): 38.16552734375034
  */ 
});

Flutter App Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  ScrollController scrollController = ScrollController();
  bool showbtn = false;

  @override
  void initState() {
    scrollController.addListener(() { //listener 
      showbtn = true;
      print(scrollController.offset); 
      //.offset is double value
      /* Outputs --------
          I/flutter (26854): 32.349831321022975
          I/flutter (26854): 33.07679332386385
          I/flutter (26854): 33.80375532670473
          I/flutter (26854): 34.530717329545666
          I/flutter (26854): 35.2576793323866
          I/flutter (26854): 35.62113813920479
          I/flutter (26854): 35.984641335227536
          I/flutter (26854): 36.34810014204572
          I/flutter (26854): 36.71160333806847
          I/flutter (26854): 37.07506214488666
          I/flutter (26854): 37.80202414772759
          I/flutter (26854): 38.16552734375034
      */ 

      setState(() {
         //update state 
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Get Scroll Position in Flutter"),
            backgroundColor: Colors.redAccent
         ),
         floatingActionButton: Card(
            child: showbtn? 
                   Text("Scroll Position: " + scrollController.offset.toString(),
                        style: TextStyle(fontSize: 20),)
                   :Text("")
         ),
         body: SingleChildScrollView( 
                  controller: scrollController,
                  child:Container(
                    height: 1000,
                    width: 500,
                
              )
          )
    );
  } 
}

Output Screen:

In this way, you can fetch the current scroll position of SingleChildScrollView() or ListView() or set Scroll Position change Listener in Flutter App.