flutter_animate 在按下按钮时为小部件设置动画

Question

我正在使用 flutter_animate 包，我想在按下下面的按钮时为我的文本设置动画。我找到了一种方法来做到这一点，但在构建小部件时文本会变得动画。也许我在为文本设置动画时做错了什么：

class MainApp extends StatefulWidget {
  MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> with TickerProviderStateMixin {
  late AnimationController _animationCtrl;

  @override
  Widget build(BuildContext context) {
    _animationCtrl = AnimationController(vsync: this);

    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: animateText(_animationCtrl),
            ),
            FloatingActionButton(onPressed: () {
              _animationCtrl.forward();
              setState(() {});
            })
          ],
        ),
      ),
    );
  }

  Animate animateText(AnimationController animationCtrl) {
    return Animate(
      child: Text("text")
          .animate(controller: animationCtrl)
          .moveX(end: 300, duration: 700.ms),
    );
  }
}

Answer 1

首先，您不应该在

build

方法内启动控制器。将其移至

initState

：

class _MainAppState extends State<MainApp> with TickerProviderStateMixin {
  late AnimationController _animationCtrl;

  @override
  void initState() {
    super.initState();
    _animationCtrl = AnimationController(vsync: this); // (1) Add this
  }

  @override
  Widget build(BuildContext context) {
    // (2) Remove _animationCtrl instantiation line

    return MaterialApp(

其次，您应该在

autoPlay: false

内指定

animate

，这样它就不会自动播放：

return Text("text")
    .animate(controller: animationCtrl, autoPlay: false)