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:
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
*/
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
*/
});
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,
)
)
);
}
}
In this way, you can fetch the current scroll position of SingleChildScrollView() or ListView() or set Scroll Position change Listener in Flutter App.
Please Wait...
No any Comments on this Article