Flutter动态JSON解析并渲染Lottie动画插件json_dynamic_widget_plugin_lottie的使用

Flutter动态JSON解析并渲染Lottie动画插件json_dynamic_widget_plugin_lottie的使用

目录

Live Example

介绍

json_dynamic_widget_plugin_lottie 是一个用于 JSON Dynamic Widget 的插件，它利用了 lottie 包来支持 Lottie 动画。

使用插件

import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:json_dynamic_widget_plugin_lottie/json_dynamic_widget_plugin_lottie.dart';

void main() {
  // 确保 Flutter 的绑定已完成
  WidgetsFlutterBinding.ensureInitialized();

  // ...

  // 获取注册表的实例
  var registry = JsonWidgetRegistry.instance;

  // 将插件绑定到注册表。这是必要的，以便注册表能够找到插件提供的小部件
  JsonLottiePlugin.bind(registry);

  // ...
}

示例代码

import 'dart:convert';

import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:json_dynamic_widget_plugin_lottie/json_dynamic_widget_plugin_lottie.dart';
import 'package:logging/logging.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  Logger.root.onRecord.listen((record) {
    debugPrint('${record.level.name}: ${record.time}: ${record.message}');
    if (record.error != null) {
      debugPrint('${record.error}');
    }
    if (record.stackTrace != null) {
      debugPrint('${record.stackTrace}');
    }
  });

  final navigatorKey = GlobalKey<NavigatorState>();

  final registry = JsonWidgetRegistry.instance;
  JsonLottiePluginRegistrar.registerDefaults(registry: registry);

  registry.navigatorKey = navigatorKey;

  final data = JsonWidgetData.fromDynamic(
    json.decode(await rootBundle.loadString('assets/pages/lotties.json')),
  );

  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ExampleWidgetPage(
        data: data,
      ),
      theme: ThemeData.light(),
    ),
  );
}

class ExampleWidgetPage extends StatelessWidget {
  const ExampleWidgetPage({
    super.key,
    required this.data,
  });

  final JsonWidgetData data;

  [@override](/user/override)
  Widget build(BuildContext context) => data.build(context: context);
}

更多关于Flutter动态JSON解析并渲染Lottie动画插件json_dynamic_widget_plugin_lottie的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态JSON解析并渲染Lottie动画插件json_dynamic_widget_plugin_lottie的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用json_dynamic_widget_plugin_lottie插件可以动态地解析JSON并渲染Lottie动画。以下是一个具体的代码案例，展示了如何集成和使用这个插件。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加必要的依赖：

dependencies:
  flutter:
    sdk: flutter
  json_dynamic_widget: ^x.x.x  # 请替换为最新版本号
  json_dynamic_widget_plugin_lottie: ^x.x.x  # 请替换为最新版本号
  lottie: ^x.x.x  # 请替换为最新版本号

然后运行flutter pub get来安装这些依赖。

2. 创建Lottie动画的JSON文件

假设你有一个Lottie动画的JSON文件animation.json，内容如下（这里仅展示一个简化的示例）：

{
  "type": "lottie",
  "key": "animation",
  "value": {
    "asset": "assets/animation.json",  // 指向你的Lottie动画文件
    "width": 300,
    "height": 300,
    "fit": "cover"
  }
}

3. 加载和解析JSON

在你的Flutter应用中，你需要加载并解析这个JSON文件，然后使用JsonDynamicWidgetBuilder来渲染它。

import 'package:flutter/material.dart';
import 'package:json_dynamic_widget/json_dynamic_widget.dart';
import 'package:json_dynamic_widget_plugin_lottie/json_dynamic_widget_plugin_lottie.dart';
import 'package:lottie/lottie.dart';
import 'dart:convert';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic JSON to Lottie Animation'),
        ),
        body: JsonDynamicWidgetBuilder(
          jsonData: _loadJsonData(),
          builders: JsonDynamicWidgetPluginLottie.builders, // 注册Lottie插件的builders
        ),
      ),
    );
  }

  Future<Map<String, dynamic>> _loadJsonData() async {
    // 这里假设你的JSON文件放在assets目录下
    String jsonString = await rootBundle.loadString('assets/animation.json');
    return jsonDecode(jsonString);
  }
}

4. 确保你的资产文件正确配置

在pubspec.yaml文件中，确保你已经将Lottie动画的JSON文件添加到了assets部分：

flutter:
  assets:
    - assets/animation.json

5. 运行你的应用

现在，你可以运行你的Flutter应用。如果一切正常，你应该能够看到从JSON动态解析并渲染的Lottie动画。

注意事项

  • 确保你的Lottie动画JSON文件是有效的，并且与lottie插件兼容。
  • json_dynamic_widget和json_dynamic_widget_plugin_lottie插件的版本号需要匹配，以避免兼容性问题。
  • 如果你的JSON结构有所不同，请相应调整animation.json文件和解析逻辑。

通过上述步骤，你应该能够成功地在Flutter应用中动态解析JSON并渲染Lottie动画。

回到顶部