demonstrate "more to scroll" display

main.dart

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; // flutter pub add flutter_hooks

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ScrollController Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ScrollController Demo'),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          print('constraints: $constraints');
          return HomeScreen(
            constraints: constraints,
          );
        }),
      ),
    );
  }
}

class HomeScreen extends HookWidget {
  const HomeScreen({
    super.key,
    required BoxConstraints constraints,
  });

  @override
  Widget build(BuildContext context) {
    final scroller = useScrollController();
    useListenable(scroller);
    final moreHidden = useState(false);
    if (scroller.positions.isEmpty) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        if (scroller.position.extentAfter > 0) {
          moreHidden.value = true;
        }
      });
    } else {
      moreHidden.value = scroller.position.extentAfter > 0;
    }
    print([moreHidden.value, scroller.positions]);
    return Container(
      color: Colors.orange,
      child: Row(
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.center,
              color: Colors.red,
              child: const Text('Left'),
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.center,
              color: Colors.green,
              child: Column(
                children: [
                  Expanded(
                    child: Container(
                      color: Colors.yellow,
                      child: ListView(
                        controller: scroller,
                        children: List.generate(
                          20,
                          (n) => Center(
                            child: Text('item ${n + 1}',
                                style: const TextStyle(fontSize: 18)),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Center(
                    child: AnimatedOpacity(
                      duration: const Duration(milliseconds: 200),
                      opacity: moreHidden.value ? 1 : 0,
                      child: const Text('scroll to see more',
                          style: TextStyle(fontSize: 24),
                          textAlign: TextAlign.center),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.center,
              color: Colors.red,
              child: const Text('Right'),
            ),
          ),
        ],
      ),
    );
  }
}