flutter-layout - 模态底页被抬起时如何使颤动动画全屏播放？

Question

我正在尝试在举起时使用confetti 包将五彩纸屑动画添加到模态底页。但它没有按预期工作 - 动画在屏幕中间被剪切。当我从按钮按下调用动画时，它按预期工作。所需的结果就像按下按钮时一样，但应该是在模态底页被提升时。

我试过把 , , 也包进去，但ConfettiWidget这些都行不通。ExpandedPositioned.fillFlexible

编辑： 做了一些测试，似乎问题只存在于 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,
      ],
)