flutter_math_curve_loading #

Mathematical-curve loading indicators for Flutter. A particle trail rides a parametric curve over a faint background track, with breathing detail and optional slow rotation.

A Flutter port of math-curve-loaders.

Usage #

import 'package:flutter_math_curve_loading/flutter_math_curve_loading.dart';

// Defaults to MathCurves.originalThinking.
const MathCurveLoading();

// Pick a preset, size, and color.
MathCurveLoading(
  curve: MathCurves.roseCurve,
  size: 132,
  color: Colors.white,
);

Presets #

21 built-in curves in MathCurves:

originalThinking, thinkingFive, thinkingNine, roseOrbit, roseCurve, roseTwo, roseThree, roseFour, lissajousDrift, lemniscateBloom, hypotrochoidLoop, threePetalSpiral, fourPetalSpiral, fivePetalSpiral, sixPetalSpiral, butterflyPhase, cardioidGlow, cardioidHeart, heartWave, spiralSearch, fourierFlow.

MathCurves.all lists them in gallery order.

Configuring a curve #

Each preset is a default invocation of a named constructor — every shape parameter is a named argument. Tune look/timing with copyWith.

// Shape: 6-petal rose with a bigger radius.
MathCurve.rose(k: 6, a: 11, scale: 3.0);

// Look/timing: more particles, longer tail, thicker track, no rotation.
MathCurves.roseCurve.copyWith(
  particleCount: 120,
  trailSpan: 0.5,
  strokeWidth: 6,
  rotate: false,
  loop: const Duration(milliseconds: 3000),
);

// Combine both.
MathCurveLoading(
  curve: MathCurve.spiral(bigR: 8, r: 1.4).copyWith(particleCount: 100),
  speed: 1.5,
);

Named constructors (with their key shape params):

Every constructor also takes the look/timing knobs particleCount, trailSpan, loop, pulse, rotation, strokeWidth, and rotate.

For a fully bespoke shape, use the base constructor with your own point — it maps a normalized progress (0..1) and a breathing detailScale (~0.04..1) to an Offset in a 0..100 box (origin top-left, y down):

MathCurve(
  name: 'Circle',
  tag: 'r = const',
  particleCount: 64,
  trailSpan: 0.4,
  loop: const Duration(milliseconds: 3000),
  pulse: const Duration(milliseconds: 4000),
  strokeWidth: 5,
  point: (progress, detailScale) {
    final t = progress * 2 * math.pi;
    return Offset(50 + 40 * math.cos(t), 50 + 40 * math.sin(t));
  },
);

Example #

A gallery of every preset that runs in the browser:

cd example
flutter run -d chrome