Morphing Text

It is a collection of text animations inspired by LTMorphingLabel.

Animations

ScaleMorphingText

ScaleMorphingText(
    texts: text,
    loopForever: true,
    onComplete: () {},
    textStyle: TextStyle(fontSize: 40.0),
),

EvaporateMorphingText

EvaporateMorphingText(
    texts: text,
    loopForever: true,
    onComplete: () {},
    yDisplacement: 1.2,     // To factor of y-displacement
    textStyle: TextStyle(fontSize: 40.0),
),

All Parameters

TypeParameterDescriptionDefault
List<String>textsList of String which will show the text-
TextStyletextStyleStyling of textsDefaultTextStyle
DurationspeedDefine the speed of changing of each text500 milliseconds
DurationpauseDefine the pause between each transition1500 milliseconds
boolloopForeverWhen true animations will repeat indefinitelyfalse
intloopCountNumber of time animation will repeat itself1
voidonCompleteWhen loopCount is completed it is called-
CurvefadeInCurveCurve which controls opacity from 0 to 1Curves.easeInExpo
CurvefadeOutCurveCurve which controls opacity from 1 to 0Curves.easeOut
CurveprogressCurveCurve which controls movement of text and scale changesCurves.easeIn

Changing Curves is purely experimental, select proper curves as per your need or leave them at default

Making custom animations

  1. To make custom animations extend your class with MorphingText
class CustomFooMorphingText extends MorphingText {
  ...
}
  1. Override incomingText and outgoingText methods to animate entry of next and exit of previous text respectively and pass text, textStyle and progress to super.
class CustomFooMorphingText extends MorphingText {
  CustomFooMorphingText(
      String text,
      TextStyle textStyle,
      double progress,
  ) : super(text, textStyle, progress);

  @override
  TextProperties morphingText(TextProperties textProperties) {
    // Optional to change the motion of moving text
  }

  @override
  TextProperties incomingText(TextProperties textProperties) {
    // Write you logic for next text
  }

  @override
  TextProperties outgoingText(TextProperties textProperties) {
    // Write you logic for leaving text
  }
}
  1. Pass your custom animation to CustomMorphingText in build method.
CustomMorphingText(
  morphingText: CustomFooMorphingText(
    texts[index],
    DefaultTextStyle.of(context).style.merge(widget.textStyle),
    _progress.value,
  ),
);
  1. For example you can see implementation of CustomScaleMorphingText on github

Want to Contribute?

A help is always welcomed, check our CONTRIBUTING.md

Libraries

morphing_text