Breathing is the one animation where the user trusts the motion with their body. In my guided breathing and meditation app, Inhalo , the smooth animations and breathing pacers that guide users visually are the core of the product — backed by audio playback for guided meditation tracks and ambient sounds. When someone follows an inhale, the expanding circle on screen becomes their lungs. If it stutters, lags, or drifts off the real four-second count, they do not think "there is a bug" — they feel the exercise is wrong.

This guide walks through how to build a production-grade breathing pacer in Flutter: a phase-driven animation model, an expanding circle drawn with CustomPainter, haptic and audio cues at phase changes, and the performance habits that keep it locked at 60fps on low-end Android phones. Every snippet targets the current stable Flutter and Dart.

Model the breath cycle as phases

A breathing exercise is a small state machine.…