svg_drawing_animation 0.9.3

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 SVG from any source (string, network...). See built-in SVG Providers.
• supports Duration.
• supports Curves.
• customizable loading and error state.
• customizable "pen" rendering.

See SvgDrawingAnimation for more.

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 SVG. We use flutter_svg to parse SVG.
• animated_svg makes smooth transitions between two different SVG.

Feature	this package	drawing animation
Draws animations of SVG	✅	✅
Load SVG from String	✅	❌
Load SVG from Network	✅	❌
Load SVG from Assets	✅	✅
Load SVG from File	✅	❌
Recursive style (eg a group's style applies to its children)	✅	❌
Duration, Curve, repeats	✅	✅
Draws the Pen	✅	❌
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'),
    duration: const Duration(seconds: 4),
    loadingWidgetBuilder: (context) => Center(child: LinearProgressIndicator()))

Custom error handling

By default svg_drawing_animation shows an error message when an error occurs, but you can customize what to show to the user instead.

SvgDrawingAnimation(
    SvgProviders.network(
        'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg'),
    duration: const Duration(seconds: 4),
    errorWidgetBuilder: (context) => Text('Oops! Something went wrong.'))

Drawing the Pen

SvgDrawingAnimation(
    SvgProviders.network(
        'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg'),
    duration: const Duration(seconds: 4),
    penRenderer: CirclePenRenderer(radius: 15))

Design choices

Constructor parameters: 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>;

Loading and Error states

We allow custom rendering of loading and error states similar to Image's ImageLoadingBuilder and ImageErrorWidgetBuilder.

Developing

Re-generating http.Client mocks

Run flutter pub run build_runner build. See Flutter Cookbook on Mockito.