flutter_svga 0.0.6
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! 🚀