morphing_text

Description:

morphing text

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),
),
copied to clipboard
EvaporateMorphingText #

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



Type
Parameter
Description
Default




List<String>
texts
List of String which will show the text
-


TextStyle
textStyle
Styling of texts
DefaultTextStyle


Duration
speed
Define the speed of changing of each text
500 milliseconds


Duration
pause
Define the pause between each transition
1500 milliseconds


bool
loopForever
When true animations will repeat indefinitely
false


int
loopCount
Number of time animation will repeat itself
1


void
onComplete
When loopCount is completed it is called
-


Curve
fadeInCurve
Curve which controls opacity from 0 to 1
Curves.easeInExpo


Curve
fadeOutCurve
Curve which controls opacity from 1 to 0
Curves.easeOut


Curve
progressCurve
Curve which controls movement of text and scale changes
Curves.easeIn




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

Making custom animations #

To make custom animations extend your class with MorphingText

class CustomFooMorphingText extends MorphingText {
...
}
copied to clipboard

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
}
}
copied to clipboard

Pass your custom animation to CustomMorphingText in build method.

CustomMorphingText(
morphingText: CustomFooMorphingText(
texts[index],
DefaultTextStyle.of(context).style.merge(widget.textStyle),
_progress.value,
),
);
copied to clipboard

For example you can see implementation of CustomScaleMorphingText on github

Want to Contribute? #
A help is always welcomed, check our CONTRIBUTING.md