Need help with SVGAPlayer-Flutter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

svga
134 Stars 25 Forks Other 63 Commits 12 Opened issues

Description

The SVGAPlayer implementation of Flutter using CustomPainter.

Services available

!
?

Need anything else?

Contributors list

SVGAPlayer-Flutter

简体中文

Introduce

SVGAPlayer is a light-weight animation renderer. You use tools to export

svga
file from
Adobe Animate CC
or
Adobe After Effects
, and then use SVGAPlayer to render animation on mobile application.

SVGAPlayer-Flutter
render animation natively via Flutter CustomPainter, brings you a high-performance, low-cost animation experience.

If wonder more information, go to this website.

  • SVGAPlayer-Flutter supports 2.0 format only.

Usage

Here introduce

SVGAPlayer-Flutter
usage. Wonder exporting usage? Click here.

Add dependency

dependencies:
  svgaplayer_flutter: ^0.0.1  #latest version

Locate files

SVGAPlayer could load svga file from Flutter local

assets
directory or remote server. Add file to pubspec.yaml by yourself.

Super simple to use

The simplest way to render an animation is to use

SVGASimpleImage
component.
class MyWidget extends Widget {

@override Widget build(BuildContext context) { return Container( child: SVGASimpleImage( resUrl: "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true"), ); }

}

Animation will run repeatedly. If you wondering a stronger animation controls, use code.

Code to use

To control an animation rendering, you need to create a

SVGAAnimationController
instance just like Flutter regular animation. Assign to
SVGAImage
, load and decode resource using
SVGAParser
, and then do things as you want with
SVGAAnimationController
.
import 'package:flutter/material.dart';
import 'package:svgaplayer_flutter/svgaplayer_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); }

class _MyAppState extends State with SingleTickerProviderStateMixin { SVGAAnimationController animationController;

@override void initState() { this.animationController = SVGAAnimationController(vsync: this); this.loadAnimation(); super.initState(); }

@override void dispose() { this.animationController.dispose(); super.dispose(); }

void loadAnimation() async { final videoItem = await SVGAParser.shared.decodeFromURL( "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true"); this.animationController.videoItem = videoItem; this .animationController .repeat() // Try to use .forward() .reverse() .whenComplete(() => this.animationController.videoItem = null); }

@override Widget build(BuildContext context) { return Container( child: SVGAImage(this.animationController), ); } }

Cache

We will not manage any caches, you need to use

dio
or other libraries to handle resource caches.

Use

SVGAParser.decodeFromBytes
method to decode caching data.

Features

Here are many feature samples.

License

996.ICU

Anti 996

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.