Блог

Я пытаюсь добавить анимацию конфетти на модальный нижний лист, используя пакет конфетти, когда он поднимается. Но это работает не так, как задумывалось — анимация обрезается в середине экрана. Это работает так, как задумывалось, когда я вызываю анимацию нажатием кнопки. Желаемый результат похож на нажатие кнопки, но должен быть при поднятии модального нижнего листа.

Я тоже пробовал заворачивать 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,
                  )
                ],
              ),
            )
          ],
        ),
    );
  }
 

Необходимо установить значение 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,
      ],
)