Remove AlwaysFillViewportPageView and use the original PageView with OverflowBox

[fujidaiti]

I fond that AlwaysFillViewportPageView widget can be replaced with the original PageView with OverflowBox as follows. It's much more simpler than the current implementation and doesn't require copying and pasting the original source code of PageView. It should be also possible to rewrite the logic of overshoot effect using OverflowBox.

https://api.flutter.dev/flutter/widgets/OverflowBox-class.html

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(useMaterial3: true),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const viewportFraction = 0.8;
  final controller = PageController(
    viewportFraction: viewportFraction,
  );

  @override
  Widget build(BuildContext context) {
    final colors = [
      Colors.red,
      Colors.yellow,
      Colors.green,
      Colors.blue,
    ];
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          return PageView.builder(
            controller: controller,
            itemBuilder: (context, page) {
              return Transform.scale(
                scale: viewportFraction,
                child: OverflowBox(
                  minWidth: constraints.minWidth,
                  maxWidth: constraints.maxWidth,
                  minHeight: constraints.minHeight,
                  maxHeight: constraints.maxHeight,
                  child: ColoredBox(
                    color: colors[page % colors.length].withOpacity(0.7),
                    child: const Placeholder(),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

The result:

[fujidaiti]

Basically it works, but there is a hit test problem where even if the size of an overflowbox is larger than its parent, the clickable area of the box is clipped at the parent's boundary. This is an issue when creating the box that overflows the page boundary for the overshoot effect.

• A related issue (in flutter/flutter)
• Working branch