import 'package:flutter/material.dart';

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

class ScrollNotificationPage extends StatefulWidget {
  @override
  _ScrollNotificationPageState createState() => _ScrollNotificationPageState();
}

class _ScrollNotificationPageState extends State<ScrollNotificationPage> {
  String _progress = "0%";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ScrollNotification 组件'),
        ),
        body: Scrollbar(
          child: NotificationListener<ScrollNotification>(
            onNotification: (ScrollNotification notification) {
              double progress = notification.metrics.pixels /
                  notification.metrics.maxScrollExtent;
              setState(() {
                _progress = "${(progress * 100).toInt()}%";
              });
              // 返回true，表示通知被拦截，不再向上传递
              return true;
            },
            child: Stack(
              alignment: Alignment.center,
              children: [
                ListView.builder(
                  itemCount: 100,
                  // itemExtent: 50,
                  itemBuilder: (context, index) {
                    return ListTile(title: Text("标题 $index"));
                  },
                ),
                CircleAvatar(
                  radius: 30.0,
                  child: Text(_progress),
                  backgroundColor: Colors.black54,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}