如何在Flutter中自定义文本动画，让缩放动画文本仅显示一次并常驻？

你需要调整AnimatedTextKit的配置项关闭重复播放，再增加点击跳转逻辑即可实现需求，具体修改如下：

核心配置调整 #

• 禁用动画重复逻辑：给AnimatedTextKit添加三个参数保证动画仅执行1次入场后常驻显示
  • repeatForever: false：关闭无限循环播放
  • isRepeatingAnimation: false：禁用动画重复执行逻辑
  • totalRepeatCount: 1：限定动画总执行次数为1次
• 实现点击跳转：可以直接使用组件自带的onTap回调处理跳转逻辑，也可以在外层包裹GestureDetector/InkWell自定义点击反馈效果

完整可运行代码示例 #

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: AnimatedTextKit(
          animatedTexts: [
            ScaleAnimatedText(
              " Rehman",
              textStyle: const TextStyle(
                fontSize: 85.0,
                fontFamily: "MonteCarlo",
                color: Colors.white
              )
            )
          ],
          // 动画仅执行1次，结束后保持显示
          repeatForever: false,
          isRepeatingAnimation: false,
          totalRepeatCount: 1,
          // 点击跳转逻辑
          onTap: () {
            // 替换为你自己的页面跳转逻辑即可
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const TargetPage()
              )
            );
          },
        ),
      ),
    );
  }
}

// 跳转目标页面示例
class TargetPage extends StatelessWidget {
  const TargetPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("目标页面")),
      body: const Center(child: Text("跳转成功")),
    );
  }
}

内容的提问来源于stack exchange，提问作者Sultan ul Arefin