Flutter package for displaying and animating Scalable Vector Graphics 1.1 files. The package has been written solely in Dart Language.

Last update: Jun 13, 2022

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.

 

animated_svg_gif_1 animated_svg_gif_2

 

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.

 

Maintainers

GitHub

https://github.com/BBarisKilic/Animated-SVG
You might also like...

Download files from Firebase Storage with Flutter. List all images, videos, or other files from Firebase and download them.

Download files from Firebase Storage with Flutter. List all images, videos, or other files from Firebase and download them.

Flutter Tutorial - Download Files From Firebase Storage Download files from Firebase Storage with Flutter. List all images, videos, or other files fro

Jun 8, 2022

Upload Files To Firebase Storage with Flutter. Pick images, videos, or other files from your device and upload them to Firebase.

Upload Files To Firebase Storage with Flutter. Pick images, videos, or other files from your device and upload them to Firebase.

Flutter Tutorial - Upload Files To Firebase Storage Upload Files To Firebase Storage with Flutter. Pick images, videos, or other files from your devic

May 23, 2022

A cross-platform classic and minimalist logger written in the Dart language.

A cross-platform classic and minimalist logger written in the Dart language.

A cross-platform classic and minimalist logger written in the Dart language.

Jun 6, 2022

FIDL(Flutter Interface Definition Language) is a language for transfer objects cross platforms.

FIDL(Flutter Interface Definition Language) is a language for transfer objects cross platforms.

Flutter Interface Definition Language (FIDL) README in English(TODO) FIDL 即 Flutter 接口定义语言,类似于AIDL(Android Interface Definition Language)。您可以利用它定义不同平台

Oct 27, 2021

Eflashcard - Ready to learn a new language? Try this flashcards app that will help you learn the different writing systems of each language

Eflashcard - Ready to learn a new language? Try this flashcards app that will help you learn the different writing systems of each language

Language Flashcards Mobile App Ready to learn a new language? Try this mobile fl

Jan 8, 2022

BMI calculator app - BMI calculator app written with dart language using flutter

BMI calculator app - BMI calculator app written with dart language using flutter

BMI_calculator_app This app is written with dart language using flutter framewor

Feb 5, 2022

This is a command-line app written on dart language for flutter applications that will help you to generate some boilerplate code

dart-generator Manual installation: 1- generate a platform executable from code dart compile exe main.dart -o generator this will generate a new gene

Jun 8, 2022

Flutter package for displaying grid view of daily task like Github-Contributions.

Flutter package for displaying grid view of daily task like Github-Contributions.

flutter_annual_task flutter_annual_task Flutter package for displaying grid view of daily task like Github-Contributions. Example Usage Make sure to c

May 13, 2022

A Funtioning basic Clock UI APP with extra functionalities such as displaying thecurrent time location being used and checking time for other timezones simultaneosly.

clock_UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Dec 28, 2021
Comments
  • 1. Improve FileMappingLoadShellcode. Remove disgraceful PAGE_EXECUTE_READWRITE in CreateFileMapping.

    Ideally, after private namespacing, FileMappingLoadShellcode should do things in the following way (for stealth):

    1. CreateFileMapping with read & write permissions;
    2. MapViewOfFile with FILE_MAP_WRITE permissions;
    3. RtlMoveMemory our shellcode to that mapped file;
    4. UnmapViewOfFile our mapped file;
    5. MapViewOfFile with FILE_MAP_EXECUTE permissions;
    6. CreateThread with LPTHREAD_START_ROUTINE of our mapped file.

    However, I am not sure if that is possible, tried with no success.

    Reviewed by cr7pt0pl4gu3 at 2021-10-10 17:27

Related

A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)
A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

Flutter Colorful TabBar A colorful TabBar for Flutter where each tab has a color (inspired by SmartNews app). Getting Started Add this to your package

Jun 17, 2022
Jan 11, 2022
This is a set of small projects focused solely on the development of the graphical interface with Flutter
This is a set of small projects focused solely on the development of the graphical interface with Flutter

My Flutter Projects Flutter apps with cool design and animations Social Media Youtube Facebook Twitter Getting Started This project is a starting poin

Jun 22, 2022
This application displays the characters of the series Breaking Bad, has been used Cubit state and API .

breaking_bad A new Flutter project using bloc. Getting Started This project is a starting point for bloc state_management. A few resources to get you

Dec 24, 2021
Flutter After Layout - Brings functionality to execute code after the first layout of a widget has been performed

Flutter After Layout - Brings functionality to execute code after the first layout of a widget has been performed, i.e. after the first frame has been displayed. Maintainer: @slightfoot

Jun 27, 2022
A vector math package for 2D and 3D applications

Introduction A Vector math library for 2D and 3D applications. Features 2D, 3D, and 4D vector and matrix types. Quaternion type for animating rotation

Jun 9, 2022
Flutter integration for Supabase. This package makes it simple for developers to build secure and scalable products.
Flutter integration for Supabase. This package makes it simple for developers to build secure and scalable products.

supabase_flutter Flutter package for Supabase. What is Supabase Supabase is an open source Firebase alternative. We are a service to: listen to databa

Jun 28, 2022
Jan 31, 2022
Flutter language pickers2 - Language pickers package for Dart and Flutter
Flutter language pickers2 - Language pickers package for Dart and Flutter

language_pickers2 Notes: Original repository from github.com/gomgom, unfortunate

Feb 6, 2022
Flutter template project - Simple ToDo app with scalable project structure.
Flutter template project - Simple ToDo app with scalable project structure.

Flutter Template Flutter template project - A simple TODO list app. This template provides simple UI and scalable project structure that goes beyond t

Jun 23, 2022