Support pages with varied aspect ratios

[kirkbyo]

Right now only a single aspect ratio for page is supported. This leaves documents which have multiple different aspect ratios to have trailing white space. Different aspect ratios are common for documents who have their pages rotated.

This behaviour can be seen in the example below. Every second page, the aspect ratio is inversed.

Page 0, portrait	Page 1, landscape

As you can see, since Page 1 is in landscape. There is trailing whitespace before the next page.

Ideally the PageListViewport can adjust the size of the pages based on aspect ratio.

Sample

import 'package:example/momentum_verification/velocity_plotter.dart';
import 'package:flutter/material.dart';
import 'package:logging/logging.dart';
import 'package:page_list_viewport/page_list_viewport.dart';

void main() {
  PageListViewportLogs.initLoggers(Level.ALL, {
    // PageListViewportLogs.pagesList,
    PageListViewportLogs.pagesListGesturesVelocity,
  });

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Page List Viewport Demo',
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  static const _pageCount = 20;
  static const _naturalPageSizeInInches = Size(8.5, 11);

  late final PageListViewportController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PageListViewportController.startAtPage(pageIndex: 5, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: _buildViewport());
  }

  Widget _buildViewport() {
    final naturalPageSizeInPixels = _naturalPageSizeInInches * 72 * MediaQuery.of(context).devicePixelRatio;
    return Stack(
      children: [
        PageListViewportGestures(
          controller: _controller,
          lockPanAxis: true,
          child: PageListViewport(
            controller: _controller,
            pageCount: _pageCount,
            naturalPageSize: naturalPageSizeInPixels,
            pageLayoutCacheCount: 3,
            pagePaintCacheCount: 3,
            builder: (BuildContext context, int pageIndex) {
              final size = pageIndex % 2 == 0
                  ? naturalPageSizeInPixels
                  : Size(naturalPageSizeInPixels.height, naturalPageSizeInPixels.width);
              return Stack(
                children: [
                  AspectRatio(
                    aspectRatio: size.aspectRatio,
                    child: Stack(
                      children: [
                        Positioned.fill(
                          child: SizedBox(
                            width: size.width,
                            height: size.height,
                            child: ColoredBox(color: pageIndex % 2 == 0 ? Colors.red : Colors.blue),
                          ),
                        ),
                        Center(
                          child: Container(
                            padding: const EdgeInsets.all(32),
                            color: Colors.white,
                            child: Text("Page: $pageIndex"),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              );
            },
          ),
        ),
      ],
    );
  }
}