svg_drawing_animation 0.9.0

Widget for drawing animation of SVG.

SVG Drawing Animation

Widget for drawing animation of SVG. For now, it only renders paths. Feel free to propose pull requests if you want to support a new feature.

https://user-images.githubusercontent.com/3399854/206697063-64b70e3f-6586-430b-ae75-8af8984c3cd3.mov

Features

• load an SVG from any source (string, network...).
• supports Duration.
• supports Curves.
• customizable loading state.

Difference with other packages

• drawing_animation served as inspiration for this package. Check out the table below for differences.
• flutter_svg provides a Widget to render static SVGs. We use flutter_svg to parse SVG.
• animated_svg makes smooth transitions between two different SVGs.

Feature	this package	drawing_animation
Draws animations of SVG	✅	✅
Load SVG from String	✅	❌
Load SVG from Network	✅	❌
Load SVG from Assets	✅	✅
Load SVG from other sources (File...)	✅	❌
Recursive style (eg a group's style applies to its children)	✅	❌
Duration	✅	✅
Curve	✅	✅
repeats	✅	✅
Line orders (in order, all at once, top to bottom...)	❌	✅

Usage

Basic Usage

import 'package:animated_svg/animated_svg.dart';
import 'package:animated_svg/svg_provider.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
            appBar: AppBar(title: const Text('Example')),
            body: Center(
                child: AnimatedSvg(
              SvgProviders.network(
                  'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg'),
              duration: const Duration(seconds: 10),
            ))));
  }
}

Fit it in a box

MaterialApp(
  title: 'Flutter Demo',
  home: Scaffold(
      appBar: AppBar(title: const Text('Example')),
      body: Center(
          child: SizedBox(
              width: 300,
              height: 300,
              child: AnimatedSvg(
        SvgProviders.network(
            'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg'),
        duration: const Duration(seconds: 10),
      )))));

With curves and repeat

AnimatedSvg(
    SvgProviders.network(
        'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg'),
    duration: const Duration(seconds: 10),
    curve: Curves.decelerate,
    repeats: true)

Custom progress indicator

AnimatedSvg(
    SvgProviders.network(
        'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg'),
    loadingBuilder: (context) => Center(child: LinearProgressIndicator()))

Design choices

Duration, Curve, repeats

We've followed the style of ImplicitAnimations, which take a Duration, a Curve and a repeats flag similar to AnimatedRotation's turns. This allows for a good amount of customization without having to mess with AnimationControllers and StatefulWidgets.

See https://docs.flutter.dev/development/ui/animations for comprehensive information on animations.

SvgProvider

Flutter's Image widget uses an ImageProvider, while flutter_svg's SvgPicture uses a similar PictureProvider pattern. That kind of architecture is quite advanced but produces too much code. So we've opted for a typedef that is easy to implement:

typedef SvgProvider = Future<DrawableRoot>;