Flutter CustomScrollView with footer background color that fills overscroll

main.dart

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';

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

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

  @override
  State<StickyFooterExample> createState() => _StickyFooterExampleState();
}

class _StickyFooterExampleState extends State<StickyFooterExample> {
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Sample"),
        ),
        backgroundColor: Colors.red,
        body: Stack(
          children: [
            // Footer background that stays behind the content
            ListenableBuilder(
              listenable: _scrollController,
              builder: (context, child) {
                return Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    color: Colors.blue,
                    height: max(0.0, _scrollController.hasClients ? _scrollController.offset : 0.0),
                    width: double.infinity,
                  ),
                );
              },
            ),
            ScrollConfiguration(
              behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {
                PointerDeviceKind.touch,
                PointerDeviceKind.mouse,
              }),
              child: CustomScrollView(
                controller: _scrollController,
                physics: AlwaysScrollableScrollPhysics(
                  parent: BouncingScrollPhysics(),
                ),
                slivers: [
                  SliverFillRemaining(
                    hasScrollBody: false,
                    fillOverscroll: true,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Container(
                          color: Colors.green,
                          height: .3 * MediaQuery.sizeOf(context).height,
                        ),
                        Container(
                          color: Colors.blue,
                          height: .1 * MediaQuery.sizeOf(context).height,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}