如何在 Flutter 中为文本字段添加动画

Question

我想在 flutter 中制作这个动画，它是针对计算器应用程序的。如何更改此处显示的文本字段？

这就是我正在谈论的动画

Answer 1

看看这个答案如何在 Flutter 中对文本的 fontSize 进行动画处理？ .

它将帮助您设置文本大小的动画。如果您需要 y 轴上的偏移和淡出的进一步动画，您可以使用许多方法，例如动画生成器、动画不透明度，但我敢打赌使用 simple_animations 包会更简单。

Answer 2

我不确定文本字段中的内容，但是您可以使用下面的包为文本字段的标签文本设置动画。 它提供幻灯片、淡入淡出和打字机动画。

动画提示文本字段

例如：

AnimatedTextField(
animationType: Animationtype.slide, //for Slide animations
decoration: InputDecoration(
  prefixIcon: Icon(Icons.search),
  border: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.red, width: 2),
    borderRadius: BorderRadius.circular(4),
    ),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.black, width: 2),
    borderRadius: BorderRadius.circular(4),
    ),
  contentPadding: EdgeInsets.all(12),
  ),
hintTexts: [
  'Search for "Bengaluru"',
  'Search for "Mumbai"',
  'Search for "Chennai"',
  ],
);