Logo Motion 🚀 #

A highly customizable and premium SVG logo loading animation widget for Flutter. Provide any SVG logo path data and watch it animate with a beautiful stroke-trace followed by a smooth solid fill-reveal.

Features ✨ #

• SVG Support: Easily load your logo from a raw SVG string or an asset path.
• 2 Animation Styles:
  1. Infinite Loop (repeat: true): Cycles through progressive path stroke drawing, full-color fill reveal, and a graceful fade out before repeating.
  2. Single Play (repeat: false): Plays the path stroke drawing, reveals the full fill, and stops—keeping your logo completely filled and visible.
• Customizable: Tweak the colors, stroke width, canvas size, animation duration, and repeating behavior to perfectly match your brand's aesthetics.

Installation 📦 #

Add the dependency to your project's pubspec.yaml file:

dependencies:
  logo_motion: ^0.0.1

Usage 🛠️ #

Import the library in your Dart code:

import 'package:logo_motion/logo_motion.dart';

1. From an SVG String #

LogoMotion.string(
  '''<svg viewBox="0 0 100 100"><path d="..."/></svg>''',
  size: 80.0,
  color: Colors.deepPurple,
  duration: const Duration(seconds: 3),
  strokeWidth: 2.0,
  repeat: false, // Plays once and stays filled!
)

2. From a Flutter Asset #

Note: Don't forget to declare your SVG asset in your pubspec.yaml.

LogoMotion.asset(
  'assets/logo.svg',
  size: 100.0,
  color: Colors.blueAccent,
  duration: const Duration(seconds: 2),
  repeat: true, // Cycles infinitely
)

Parameters ⚙️ #

Author ✍️ #

Developed with ❤️ by A.Majed.