Track containers 1: page view with overflowing children

main.dart

// Overflowing children: portions cannot be touched when they overlap
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ValueNotifier<double> _scrollOffsetNotifier;
  late PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(viewportFraction: 0.5, initialPage: 1)
      ..addListener(_onPageScroll);
    _scrollOffsetNotifier = ValueNotifier<double>(300);
  }

  double _scale(double value, double inLow, double inHigh, double outLow,
      double outHigh) {
    return ((value - inLow) / (inHigh - inLow)) * (outHigh - outLow) + outLow;
  }

  void _onPageScroll() {
    _scrollOffsetNotifier.value = _pageController.position.pixels;
  }

  Widget _buildContainer(Color color, Color borderColor) => Container(
      decoration: BoxDecoration(
          color: color, border: Border.all(color: borderColor, width: 8)),
      child:
          Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
        RaisedButton(onPressed: () {}, child: Text('foo')),
        RaisedButton(onPressed: () {}, child: Text('foo')),
        RaisedButton(onPressed: () {}, child: Text('foo')),
      ]));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(children: [
          Container(
              color: Color(0x88888888),
              height: 600,
              child: PageView(
                  scrollDirection: Axis.vertical,
                  controller: _pageController,
                  children: [
                    AnimatedBuilder(
                        animation: _scrollOffsetNotifier,
                        builder: (context, child) => OverflowBox(
                            maxHeight: _scrollOffsetNotifier.value < 300
                                ? _scale(_scrollOffsetNotifier.value, 0, 300,
                                    600, 300)
                                : 300,
                            child: _buildContainer(
                                Color(0x88FF0000), Color(0xFFFF0000)))),
                    Container(color: Color(0x8800FF00)),
                    AnimatedBuilder(
                        animation: _scrollOffsetNotifier,
                        builder: (context, child) => OverflowBox(
                            maxHeight: _scrollOffsetNotifier.value > 300
                                ? _scale(_scrollOffsetNotifier.value, 300, 600,
                                    300, 600)
                                : 300,
                            child: _buildContainer(
                                Color(0x880000FF), Color(0xFF0000FF)))),
                  ])),
        ]));
  }
}