svg_drawing_animation 0.10.0+1 svg_drawing_animation: ^0.10.0+1 copied to clipboard
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(
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.