如何在Flutter中动画文本字段

cqoc49vn  于 2023-10-22  发布在  Flutter
关注(0)|答案(2)|浏览(166)

我想让这个动画在Flutter,这是一个计算器应用程序。如何更改此处的文本字段?
This is the animation which I am talking about

72qzrwbm

72qzrwbm1#

我不确定文本字段中的内容,但你可以使用下面的包动画你的文本字段的标签文本。它提供了幻灯片,褪色和打字机动画。
animated_hint_textfield
例如:

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"',
  ],
);
nue99wik

nue99wik2#

看看这个答案How to animate the fontSize of a Text in Flutter?
它将帮助您动画的文本大小。如果你需要在y轴上的偏移和淡出的动画,你可以使用很多方法,比如动画构建器,动画不透明度,但我敢打赌使用simple_animations包会更简单。

相关问题