svg_drawing_animation 0.10.0+1 copy "svg_drawing_animation: ^0.10.0+1" to clipboard
svg_drawing_animation: ^0.10.0+1 copied to clipboard

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

SVG Drawing Animation #

pub package

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

With curves and repeat #

SvgDrawingAnimation(
    SvgProvider.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(
    SvgProvider.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(
    SvgProvider.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(
    SvgProvider.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. We follow that architecture by introducing an SvgProvider with Futures instead of Streams for simplicity.

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.

19
likes
0
pub points
60%
popularity

Publisher

verified publisherwafrat.com

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

Homepage
Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter, flutter_svg, http

More

Packages that depend on svg_drawing_animation