Flutter Demo: ScrollNotification Example

main.dart

import 'package:flutter/material.dart';

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

class ScrollNotificationTest extends StatefulWidget {
  const ScrollNotificationTest({super.key});

  @override
  State<ScrollNotificationTest> createState() => _ScrollNotificationTestState();
}

class _ScrollNotificationTestState extends State<ScrollNotificationTest> {
  String progress = "0%";
  ScrollController controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
        controller: controller,
        child: NotificationListener<ScrollNotification>(
          onNotification: (notification) {
            setState(() {
              progress =
                  "${(notification.metrics.pixels / notification.metrics.maxScrollExtent * 100).toInt()}%";
            });
            return false;
          },
          child: Stack(
            alignment: Alignment.center,
            children: [
              ListView.builder(
                  controller: controller,
                  itemCount: 100,
                  itemExtent: 50.0,
                  itemBuilder: ((context, index) => ListTile(
                        title: Text("$index"),
                      ))),
              CircleAvatar(
                radius: 30.0,
                backgroundColor: Colors.black54,
                child: Text(progress),
              )
            ],
          ),
        ));
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: const ScrollNotificationTest(),
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(title: 'ScrollNotification Example'),
    );
  }
}