如何让Flutter图片缩放动画完成后停止且正常显示？

原代码中直接调用controller.stop(canceled: true)会把动画重置到初始值（scale为0），导致图片无法正常显示，而且你没有启动动画，自然看不到缩放效果。要实现“缩放至目标状态后停止”，正确的做法是让动画完整执行一次到结束，而非提前终止。

解决步骤 #

• 启动单次动画：使用controller.forward()，该方法会让动画从当前值（默认0）播放到上限值（默认1），完成后自动停止，保持在目标状态。
• 释放控制器资源：在组件销毁时调用controller.dispose()，避免内存泄漏。
• （可选）监听动画状态：如果需要在动画结束后执行额外逻辑，可添加状态监听器。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> animation;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

    // 启动动画，从0播放到1，完成后自动停止
    controller.forward();

    // 可选：监听动画完成事件，执行自定义逻辑
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        print('缩放动画已完成');
      }
    });
  }

  @override
  void dispose() {
    // 释放动画控制器资源
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.brown,
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          const Text('Welcome',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 55,
                  fontWeight: FontWeight.bold)),
          const Text('To',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 35,
                  fontWeight: FontWeight.bold)),
          const SizedBox(height: 20.0),
          ScaleTransition(
              scale: animation,
              child: SizedBox(child: Image.asset('images/logo.png', height: 200))),
          const SizedBox(height: 20.0),
          ElevatedButton(
              onPressed: () {
                // 若需重新触发动画，可调用此方法
                // controller.forward(from: 0.0);
              },
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white,
                  foregroundColor: Colors.red,
                  minimumSize: const Size(300, 40)),
              child: const Text('Show'))
        ]),
      ),
    );
  }
}

关键说明 #

• controller.forward()：替代原有的stop方法，让动画完整执行一次，结束后保持在scale=1的状态，图片正常显示。
• dispose()方法：必须在State销毁时释放动画控制器，这是Flutter动画开发的必要操作，防止内存泄漏。
• 状态监听器：可根据需求添加，用于在动画完成、暂停等状态变化时执行对应逻辑。

内容的提问来源于stack exchange，提问作者Steven