如何在Flutter中实现指定Lottie动画并动态修改其中文本？

完全可以实现，核心依赖是lottie包，下面是具体步骤和代码示例：

1. 添加依赖与配置资源 #

首先在pubspec.yaml中添加lottie包依赖，并配置动画资源：

dependencies:
  flutter:
    sdk: flutter
  lottie: ^2.7.0 # 使用最新版本即可

flutter:
  assets:
    - assets/lottie/lower_third.json # 替换为你下载的动画JSON路径

将你从LottieFiles下载的动画JSON文件放到项目的assets/lottie/目录下（目录可自定义）。

2. 动态修改文本的实现方式 #

方式一：使用LottieDelegates（推荐，支持动态更新） #

通过Lottie.asset的delegates参数，你可以根据初始文本或图层名称替换内容：

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

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

  @override
  State<LowerThirdScreen> createState() => _LowerThirdScreenState();
}

class _LowerThirdScreenState extends State<LowerThirdScreen> {
  String _dynamicTitle = "我的自定义标题";
  String _dynamicSubtitle = "我的自定义副标题";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset(
          'assets/lottie/lower_third.json',
          delegates: LottieDelegates(
            text: (initialText, layer) {
              // 根据图层名称替换（需先确认动画里的文本图层名称）
              if (layer.name == "title_layer") {
                return _dynamicTitle;
              } else if (layer.name == "subtitle_layer") {
                return _dynamicSubtitle;
              }
              // 或者根据初始文本替换
              // if (initialText == "YOUR TEXT HERE") return _dynamicTitle;
              return initialText;
            },
          ),
          repeat: true,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _dynamicTitle = "更新后的标题";
          _dynamicSubtitle = "更新后的副标题";
        }),
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

方式二：加载后修改LottieComposition #

如果你需要提前修改动画内容再加载，可以先加载LottieComposition并修改文本图层：

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

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

  @override
  State<LowerThirdScreen> createState() => _LowerThirdScreenState();
}

class _LowerThirdScreenState extends State<LowerThirdScreen> {
  late LottieComposition _modifiedComposition;
  bool _isLoaded = false;

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

  Future<void> _loadAndModifyComposition() async {
    final composition = await LottieComposition.fromAsset('assets/lottie/lower_third.json');
    // 遍历图层修改文本
    for (final layer in composition.layers) {
      if (layer is TextLayer) {
        if (layer.name == "title_layer") {
          layer.text = "预修改的标题";
        } else if (layer.name == "subtitle_layer") {
          layer.text = "预修改的副标题";
        }
      }
    }
    setState(() {
      _modifiedComposition = composition;
      _isLoaded = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _isLoaded
            ? Lottie(composition: _modifiedComposition, repeat: true)
            : const CircularProgressIndicator(),
      ),
    );
  }
}

3. 确认文本图层信息 #

要准确替换文本，你需要知道动画中文本图层的名称或初始文本：

• 打开LottieFiles的动画编辑页面，查看图层列表，找到文本图层的名称；
• 或者直接查看JSON文件，搜索"t"（文本内容字段）或"nm"（图层名称字段）。

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