Animated SVG | Flutter Package
Flutter package for displaying and animating Scalable Vector Graphics 1.1 files. The package has been written solely in Dart Language.
 |
 |
|---|
Features
A powerful and fully customizable widget. With this package, you can easily animate SVGs and make your UI look more lovely.
AnimatedSvg widget creates a smooth transition between the two SVGs you are going to assign.
Getting started
Let's take a look at how to implement AnimatedSvg to fastly create cool transition animation between SVGs.
First, add the following line to pubspec.yaml:
animated_svg: ^1.0.0
Second, import AnimatedSvg:
import 'package:animated_svg/animated_svg.dart';
import 'package:animated_svg/animated_svg_controller.dart';
Usage
Basic usage example:
main.dart
// Define an SvgController
late final SvgController _controller;
@override
void initState() {
// Initialize SvgController
_controller = AnimatedSvgController();
super.initState();
}
@override
void dispose() {
// Dispose SvgController
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// Call the AnimatedSvg widget anywhere in your widget tree.
return AnimatedSvg(
controller: _controller,
duration: const Duration(milliseconds: 600),
onTap: () {},
size: 80,
clockwise: false,
isActive: true,
children: [
SvgPicture.asset(
'assets/play.svg',
),
SvgPicture.asset(
'assets/pause.svg',
),
],
);
}
Example
More examples can be found in /example folder on GitHub.
Media Player - an example of basic implementation of AnimatedSvg. Simple project that simulates a media player. As usual, the player needs play and pause buttons. Thanks to the AnimatedSvg package, it is so easy to create a smooth transition between play and pause SVGs.
Additional information
This package has been written solely in Dart Language yet it has the flutter_svg as a dependency.
For more information please visit GitHub.
Feature requests and bugs
Please file feature requests and bugs at the issue tracker.
8 Jun 17, 2022
1 Jan 11, 2022
1 Dec 24, 2021
432 Jan 3, 2023
500 Dec 19, 2022
16 Dec 15, 2022
0 Feb 6, 2022
261 Dec 21, 2022
33 Dec 12, 2022
8 Nov 11, 2022