Examples
- Basic Usage
- Custom Duration
- Multi-Line
Properties
Required
String
required
The string to display. When this value changes, each character animates out from the old string and in from the new one with staggered scale, slide, and blur motion.
Content
TextStyle
Text style for the rendered string. Merges with
DefaultTextStyle — omitting this uses the ambient style.int
Maximum number of lines to render. Mirrors the
Text widget’s maxLines parameter.TextOverflow
How to handle text that exceeds
maxLines or the available width. Defaults to .clip.bool
Whether to wrap text at soft line breaks. Defaults to
true.TextAlign
Horizontal alignment of the text within its bounding box.
TextDirection
Reading direction. Defaults to the ambient
Directionality.Layout
bool
default:"false"
When
true, the widget holds the wider of the old and new text widths during the animation, preventing layout jumps when surrounding content is sensitive to size changes. When false (default), the width interpolates smoothly from old to new.Styling
Duration
Override the animation duration. Defaults to
theme.durations.long.Best Practices
- Stable style reference: If you compute a
TextStyleinbuild, make sure it is stable between builds when the text hasn’t changed, otherwise the widget will restart the transition on every rebuild. UseuseMemoizedor aconststyle. - Semantic label:
NeoFluidTextwraps its content in aSemanticswidget withlabel: data, so screen readers announce the final string rather than individual characters animating. - Width stability: Use
useMaxWidthDuringTransition: trueinside fixed-height containers where a momentary width change would cause sibling widgets to shift.
Integration Notes
NeoFluidTextuses a customRenderObjectto measure intrinsic sizes from the actual text layout, matchingTextwidget sizing exactly.NeoButton,NeoToast,NeoDropdownField, andNeoBadgeuseNeoFluidTextinternally for their labels, so label copy changes animate automatically without any extra work.