如何在Flutter 中创造以下效果

VerticalCardPager库需要改进，因为它为所有子对象运行循环，即使它们没有被绘制也会计算.

我try 了不同的方法，并使其与以下代码一起工作.

import 'package:flutter/material.dart';

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

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _upcomingPage = 0;
  final _pageController = PageController(viewportFraction: 0.6);

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

  @override
  Widget build(BuildContext context) {
    final List<String> titles = [
      "RED",
      "YELLOW",
      "BLACK",
      "CYAN",
      "BLUE",
      "GREY",
    ];

    final List<Widget> images = [
      Container(
        color: Colors.pink[800],
      ),
      Container(
        color: Colors.purple[800],
      ),
      Container(
        color: Colors.black,
      ),
      Container(
        color: Colors.deepOrange[800],
      ),
      Container(
        color: Colors.indigo[800],
      ),
      Container(
        color: Colors.green[800],
      ),
    ];
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 12),
          child: GestureDetector(
            onVerticalDragEnd: (details) {
              if ((details.primaryVelocity ?? 0) > 0) {
                _upcomingPage = (_pageController.page?.toInt() ?? 0) - 1;
                _pageController.previousPage(
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.linear);
              } else if ((details.primaryVelocity ?? 0) < 0) {
                _upcomingPage = (_pageController.page?.toInt() ?? 0) + 1;
                _pageController.nextPage(
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.linear);
              }
              if (_upcomingPage < 0) {
                _upcomingPage = 0;
              }
              if (_upcomingPage == images.length) {
                _upcomingPage = images.length - 1;
              }
              setState(() {});
            },
            child: PageView.builder(
              physics: const NeverScrollableScrollPhysics(),
              scrollDirection: Axis.vertical,
              controller: _pageController,
              itemBuilder: (context, index) {
                final Alignment align;
                final double heightFactor;
                if (index < _upcomingPage) {
                  align = Alignment.bottomCenter;
                  heightFactor = 0.3;
                } else if (index > _upcomingPage) {
                  align = Alignment.topCenter;
                  heightFactor = 0.3;
                } else {
                  align = Alignment.center;
                  heightFactor = 1;
                }

                return Padding(
                  padding: const EdgeInsets.symmetric(vertical: 12),
                  child: FractionallySizedBox(
                    alignment: align,
                    child: AnimatedFractionallySizedBox(
                      duration: const Duration(milliseconds: 300),
                      heightFactor: heightFactor,
                      alignment: align,
                      child: Stack(children: [
                        // modify your items here.
                        images[index],
                        Center(
                          child: Text(
                            titles[index],
                            style: const TextStyle(
                                fontSize: 24, color: Colors.white),
                          ),
                        )
                      ]),
                    ),
                  ),
                );
              },
              itemCount: images.length,
            ),
          ),
        ),
      ),
    );
  }
}

视频:https://youtu.be/dOg-ZvPrWSY