animated_halo

pub

A Flutter widget that renders an animated pulsing halo ring.

The animation is recreated frame-by-frame from a 72×72, 60fps, 0–89 frame reference: the inner ring keeps a fixed radius while its stroke thickens and fades in, and the outer ring expands in sync while fading in and then out.

Features

  • Pulsing inner + outer halo rings.
  • Inner ring fixed radius; outer ring radius animated.
  • Content (child) clipped to a circle inside the inner ring.
  • Fully configurable via constructor values.

Getting started

dependencies:
  animated_halo: ^1.0.0

import 'package:animated_halo/animated_halo.dart';

Usage

AnimatedHalo(
  size: 72,
  color: const Color(0xFF51D3B1),
  innerColor: const Color(0xFF00B887),
  spacing: 6,
  strokeWidth: 2,
  innerStrokeWidth: 4,
  duration: const Duration(milliseconds: 1483),
    child: ClipOval(
    child: Image.network('https://example.com/avatar.jpg'),
  ),
)
AnimatedHalo pulse preview

Parameters

Param Type Default Description
size double 72 Canvas edge length.
color Color 0xFF51D3B1 Outer ring stroke color.
innerColor Color 0xFF00B887 Inner ring stroke color.
spacing double 6 Outer-ring radius delta relative to the inner ring.
strokeWidth double 2 Outer ring stroke width.
innerStrokeWidth double 4 Inner ring stroke width.
duration Duration 1483ms Duration of one animation loop.
child Widget — Content clipped to a circle inside the inner ring.

Example

Run the example app for live controls:

cd packages/animated_halo/example
flutter run

It lets you tweak size, spacing, strokeWidth, and innerStrokeWidth with live sliders, with a circular avatar shown inside the inner ring.

Additional information

Libraries

animated_halo