flutter如何实现全屏播放svga动画

在Flutter中如何实现全屏播放SVGA动画？目前使用svgaplayer插件只能在小范围内播放，想要让动画充满整个屏幕，请问应该怎么设置参数或者调整布局？有没有完整的代码示例可以参考？

2 回复

使用Flutter的svgaplayer_flutter插件，设置fit: BoxFit.fill并配合Container或Scaffold的fullscreen属性即可实现全屏播放SVGA动画。

更多关于flutter如何实现全屏播放svga动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现全屏播放SVGA动画，可以使用 svgaplayer_flutter 库。以下是具体步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  svgaplayer_flutter: ^2.0.0

运行 flutter pub get 安装。

2. 实现全屏播放

使用 SVGAImage 组件，并设置为全屏尺寸：

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

class FullScreenSVGAPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width, // 全屏宽度
        height: MediaQuery.of(context).size.height, // 全屏高度
        child: SVGAImage.asset(
          'assets/animation.svga', // SVGA文件路径
          fit: BoxFit.contain, // 保持比例适配屏幕
        ),
      ),
    );
  }
}

3. 控制动画（可选）

如需控制播放，可使用 SVGAAnimationController：

class FullScreenSVGAWithControl extends StatefulWidget {
  @override
  _FullScreenSVGAWithControlState createState() => _FullScreenSVGAWithControlState();
}

class _FullScreenSVGAWithControlState extends State<FullScreenSVGAWithControl> with SingleTickerProviderStateMixin {
  SVGAAnimationController? controller;

  @override
  void initState() {
    super.initState();
    controller = SVGAAnimationController(vsync: this);
    controller?.repeat(); // 自动循环播放
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: SVGASimpleImage(
          resUrl: "https://example.com/animation.svga",
          controller: controller!,
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

注意事项：

  • 确保SVGA文件路径正确，网络资源需配置网络权限。
  • 使用 BoxFit.contain 可保持动画比例，避免拉伸变形。
  • 通过 controller 可实现暂停、循环等高级控制。

以上代码即可实现全屏播放SVGA动画，适配不同屏幕尺寸。

回到顶部