如何在Flutter中设置文本的fontSize动画

Question

有什么方法可以在Text小部件中为fontSize的增加/减少设置动画吗？

Answer 1

可能更简单的解决方案是使用AnimatedTextStyle。

double _size = 10;

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => setState(() => _size += 50),
),
body: AnimatedDefaultTextStyle(
duration: Duration(milliseconds: 400),
style: TextStyle(fontSize: _size),
child: Text('A'),
),
);
}

Answer 2

这可以用很多不同的方法来完成，比如使用AnimationController，设置侦听器，然后在它上调用setState。但我认为更好的方法是在用例中使用TweenAnimationBuilder。这是最小代码：

double _size = 10;

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => setState(() => _size += 30),
),
body: TweenAnimationBuilder<double>(
duration: Duration(milliseconds: 300),
tween: Tween<double>(begin: _size, end: _size),
builder: (_, size, __) => Text('A', style: TextStyle(fontSize: size)),
),
);
}