如何创建翻转倒计时时钟小部件

Question

如果有人知道如何制作这种类型的动画，请帮助我。
我尝试了 pub.dev 中的各种软件包，但没有用。请协助我。

感谢任何帮助
谢谢

Answer 1

你可以使用 flip_board 包，它基本上提供翻转板，ir=t 还包含一个翻转时钟和一个翻转倒计时时钟。

您需要的代码示例：

Widget _flipCountdown(ColorScheme colors) => 
    Container(
      decoration: BoxDecoration(
        color: colors.secondary,
        borderRadius: BorderRadius.circular(8.0),
      ),
      padding: const EdgeInsets.all(24.0),
      child: FlipCountdownClock(
        duration: const Duration(minutes: 1),
        digitSize: 54.0,
        width: 46.0,
        height: 62.0,
        digitColor: colors.surface,
        backgroundColor: colors.onSurface,
        separatorColor: colors.onSurface,
        borderColor: colors.primary,
        hingeColor: colors.surface,
        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
        onDone: () => print('Buzzzz!'),
      ),
    );

Answer 2

Widget _flipCountdown(ColorScheme colors) => 
    Container(
      decoration: BoxDecoration(
        color: colors.secondary,
        borderRadius: BorderRadius.circular(8.0),
      ),
      padding: const EdgeInsets.all(24.0),
      child: FlipCountdownClock(
        duration: const Duration(minutes: 30),
        digitSize: 54.0,
        width: 46.0,
        height: 62.0,
        digitColor: colors.surface,
        backgroundColor: colors.onSurface,
        separatorColor: colors.onSurface,
        borderColor: colors.primary,
        hingeColor: colors.surface,
        borderRadius: const BorderRadius.all(Radius.circular(8.0)),
        onDone: () => print('Buzzzz!'),
      ),
    );