如何在模态底部 sheet 升高时让 flutter 动画全屏播放？

Question

我正在尝试在模式底部 sheet 升起时使用 confetti package 添加五彩纸屑动画。但它没有按预期工作 - 动画在屏幕中间被剪切。当我按下按钮调用动画时，它按预期工作。期望的结果就像按下按钮一样，但应该是在模态底部 sheet 升高时。

我试过将 ConfettiWidget 包裹在 Expanded、Positioned.fill 和 Flexible 内，但这些都不行。

编辑： 做了一些测试，似乎问题只存在于 iOS 设备上。此外，可能值得一提的是 Android 设备（物理和虚拟）上的动画比 iPhone.

上的动画要慢得多

查看下面的 gif：

构建中：

按下按钮时：

（构建时的外观）

代码：

@override
  void initState() {
    confController = ConfettiController(duration: Duration(seconds: 5));

    WidgetsBinding.instance!.addPostFrameCallback((_) {
      confController.play();
    });

    super.initState();
  }

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


Widget build(BuildContext context) {
      return Container(
        color: Colors.black,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topCenter,
              child: ConfettiWidget(
                confettiController: confController,
                blastDirectionality: BlastDirectionality.explosive,
                particleDrag: 0.05,
                emissionFrequency: 0.1,
                gravity: 0.3,
                colors: [
                  Colors.red,
                ], // manually specify the colors to be used
              ),
            ),
            Container(
              width: 500,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  RawMaterialButton(
                    onPressed: () {
                      confController.play();
                    },
                    fillColor: Colors.white,
                  )
                ],
              ),
            )
          ],
        ),
    );
  }

Answer 1

需要将 ConfettiWidget 参数 canvas 设置为 MediaQuery.of(context).size * 2。现在按预期工作（在更小和更大的设备上测试（最大的是 iPad 12.9 英寸））。代码现在看起来像这样：

ConfettiWidget(
      confettiController: confController,
      blastDirectionality: BlastDirectionality.explosive,
      particleDrag: 0.05,
      emissionFrequency: 0.1,
      gravity: 0.3,
      canvas: MediaQuery.of(context).size * 2,
      colors: [
        Colors.red,
      ],
)

如何在模态底部 sheet 升高时让 flutter 动画全屏播放？

How to make flutter animation play full-screen when modal bottom sheet has been raised?

flutter-layout

flutter-animation

flutter-packages

flutter-widget

flutter-showmodalbottomsheet