svg_drawing_animation 0.9.1+2

Widget for drawing animation of SVG. Uses flutter_svg for parsing.

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.

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:svg_drawing_animation/svg_drawing_animation.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: SvgDrawingAnimation(
              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: SvgDrawingAnimation(
        SvgProviders.network(
            'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg'),
        duration: const Duration(seconds: 10),
      )))));

With curves and repeat

SvgDrawingAnimation(
    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

SvgDrawingAnimation(
    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>;