创建一个不同的类，并编写一个从自身示例化列表的函数

加载页面是与UI或表示层相关的，但加载数据是与业务层相关的，您需要将它们彼此分开
有一个主题称为状态管理，您应该将数据提供程序集中到一个单独的图层，并根据数据的状态更改表示图层
首先看一下this link，这是一个使用Provider模式管理数据的不同状态的示例
然后，您可以使用一些更复杂的库（如BLOC library）进行状态管理

(More解决方案）
正如我所写的here，一个选项是使用Stack小部件作为页面加载器，每个“页面”在整个屏幕上展开。
当你想显示下一个“页面”时，用SizedBox替换stack中的前一层。
所以所有的元素实际上都是同时randerd的，但不会是可见的。例如，即使用户在“第一页”上，“第二页”上的视频也会开始加载，并在用户继续时为用户准备好。
一种方法是使用get作为状态管理。

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  Widget build(BuildContext context) {
    final TestController c = Get.put(TestController());

    return Stack(
      children: [
        Container(
          color: Colors.red,
          child: FutureBuilder<Widget>(
            future: Future(() async {
              await Future.delayed(const Duration(seconds: 4));
              return const Text('Done loading in the background');
            }),
            builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
              if (snapshot.hasData) {
                return snapshot.requireData;
              }
              return const Text('Loading Video');
            },
          ),
        ),
        Obx(
          () => c.toShowTopLayer > 0
              ? Container(
                  color: Colors.blue,
                  width: double.infinity,
                  height: double.infinity,
                  child: Center(
                    child: TextButton(
                      onPressed: c.removeTopLayer,
                      child: const Text('Next'),
                    ),
                  ),
                )
              : const SizedBox(),
        ),
      ],
    );
  }
}

class TestController extends GetxController {
  var toShowTopLayer = 1.obs;

  removeTopLayer() => toShowTopLayer--;
}