flutter_svga 0.0.6 copy "flutter_svga: ^0.0.6" to clipboard
flutter_svga: ^0.0.6 copied to clipboard

A Flutter package for rendering SVGA animations with dynamic customization, smooth playback, and high performance.

flutter_svga #

A Flutter package for parsing and rendering SVGA animations efficiently.
SVGA is a lightweight and powerful animation format used for dynamic UI effects in mobile applications.


🚀 Features #

✔️ Parse and render SVGA animations in Flutter.
✔️ Load SVGA files from assets and network URLs.
✔️ Supports custom dynamic elements (text, images, animations).
✔️ Optimized playback performance with animation controllers.
✔️ Integrated audio playback within SVGA animations.
✔️ Works on Android & iOS (Web & Desktop support coming soon).
✔️ Easy loop, stop, and seek functions.


📌 Installation #

Add flutter_svga to your pubspec.yaml:

dependencies:
  flutter_svga: ^0.0.6

Then, install dependencies:

flutter pub get

🎬 Basic Usage #

Playing an SVGA Animation from Assets #

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter SVGA Example")),
        body: Center(
          child: SVGAEasyPlayer(
            assetsName: "assets/sample_with_audio.svga",
            fit: BoxFit.contain,
          ),
        ),
      ),
    );
  }
}

🌍 Playing SVGA from a Network URL #

SVGAEasyPlayer(
  resUrl: "https://example.com/sample.svga",
  fit: BoxFit.cover,
);

🎭 Advanced Usage: Using SVGAAnimationController #

Controlling Animation Playback #

class MySVGAWidget extends StatefulWidget {
  @override
  _MySVGAWidgetState createState() => _MySVGAWidgetState();
}

class _MySVGAWidgetState extends State<MySVGAWidget>
    with SingleTickerProviderStateMixin {
  late SVGAAnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = SVGAAnimationController(vsync: this);
    SVGAParser.shared.decodeFromAssets("assets/sample.svga").then((video) {
      _controller.videoItem = video;
      _controller.repeat();
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SVGAImage(_controller);
  }
}

🎨 Customization & Dynamic Elements #

Adding Dynamic Text #

controller.videoItem!.dynamicItem.setText(
  TextPainter(
    text: TextSpan(
      text: "Hello SVGA!",
      style: TextStyle(color: Colors.red, fontSize: 18),
    ),
    textDirection: TextDirection.ltr,
  ),
  "text_layer",
);

Replacing an Image Dynamically #

controller.videoItem!.dynamicItem.setImageWithUrl(
  "https://example.com/new_image.png",
  "image_layer",
);

Hiding a Layer #

controller.videoItem!.dynamicItem.setHidden(true, "layer_to_hide");

🎯 Playback Controls #

controller.forward();  // Play once
controller.repeat();   // Loop playback
controller.stop();     // Stop animation
controller.value = 0;  // Reset to first frame

🛠 Common Issues & Solutions #

Black Screen when Loading SVGA #

Solution: Ensure your svga files are correctly placed inside assets/ and registered in pubspec.yaml.

flutter:
  assets:
    - assets/sample.svga

SVGA Not Loading from Network #

Solution: Ensure the SVGA file is accessible via HTTPS. Test the URL in a browser.

SVGAEasyPlayer(
  resUrl: "https://example.com/sample.svga",
  fit: BoxFit.cover,
);

Animation Freezes or Doesn't Play #

Solution: Use setState after loading SVGA to rebuild the widget.

setState(() {
  _controller.videoItem = video;
});

📱 Supported Platforms #

Platform Supported Audio Support
✅ Android ✔️ Yes ✔️ Yes
✅ iOS ✔️ Yes ✔️ Yes
✅ Linux ✔️ Yes ✔️ Yes
✅ Web ✔️ Yes ❌ No
✅ macOS ✔️ Yes ✔️ Yes
✅ Desktop ✔️ Yes ✔️ Yes

🔄 Changelog #

See the latest changes in CHANGELOG.md.


📜 License #

This package is licensed under the MIT License. See LICENSE for details.


🤝 Contributing #

  • If you find a bug, report it here.
  • Pull requests are welcome! See CONTRIBUTING.md for guidelines.

🚀 Enjoy using SVGA animations in your Flutter app! 🚀

10
likes
150
points
385
downloads

Publisher

verified publishermsarweb.com

Weekly Downloads

A Flutter package for rendering SVGA animations with dynamic customization, smooth playback, and high performance.

Repository (GitHub)
View/report issues
Contributing

Documentation

API reference

License

MIT (license)

Dependencies

archive, audioplayers, flutter, http, path_drawing, path_provider, protobuf

More

Packages that depend on flutter_svga