How to Play SVGA File in Flutter

In this article I will show you how to play SVGA file in flutter .

What is SVGA ?

SVGA is a modern, lightweight animation format widely used in mobile apps and games. Similar to Lottie, SVGA files allow developers to render high-quality vector animations without heavy performance costs. Originally popularized in live-streaming apps and sticker systems, SVGA has become a go-to solution for interactive, dynamic visual effects.

Key Highlights of SVGA:

Lightweight & Fast: Optimized for mobile performance.
Cross-Platform: Works on iOS, Android, Flutter, and Web.
Designer-Friendly: Created in Adobe Animate, After Effects, or converted from existing assets.
Interactive: Can respond to user actions, making it ideal for stickers, gifts, and UI effects.
Rich Animation Support: Handles vectors, images, shapes, and even frame-based animations.

Where SVGA is Used:

Animated stickers and emojis.
Virtual gifts in live-streaming apps.
UI animations like hearts, likes, or celebration effects
Gamification elements inside apps.

Here is step by step method to play SVGA file in flutter . To play SVGA file in flutter app you need to add svgaplayer package .

Add Dependency

Add in your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  svgaplayer: ^3.0.1

dependencies:
  flutter:
    sdk: flutter
  svgaplayer: ^3.0.1

After that Save the file or run:

flutter pub get

flutter pub get

Add SVGA file

If you have svga file you can add it to the assets folder . Otherwise you can check my github and copy the car.svga to assets/animations directory . Then update the pubspec.yaml file and save it .

flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/animations/

flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/animations/

Import the package

import 'package:svgaplayer/svgaplayer_flutter.dart';

import 'package:svgaplayer/svgaplayer_flutter.dart';

How to play SVGA Image in Flutter from Assets

SizedBox(
            width: 200,
            height: 200,
            child: SVGASimpleImage(assetsName: "assets/animations/car.svga",)),

SizedBox(
            width: 200,
            height: 200,
            child: SVGASimpleImage(assetsName: "assets/animations/car.svga",)),

How to play SVGA Image in Flutter from Network

SizedBox(
            width: 200,
            height: 200,
            child: SVGASimpleImage(resUrl: "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true",))

SizedBox(
            width: 200,
            height: 200,
            child: SVGASimpleImage(resUrl: "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true",))

How to play SVGA file in flutter

If you like this article , please like , comment and share the article . You can also buy me a coffee.