DEV Community

loading...

Smooth transition with text styles in Flutter

ethiel97 profile image Ethiel ADIASSA ・1 min read

Hey folks! In this short article, I'll be showing you how to add a smooth transition between styles of the same text widget for example.

First let's declare the initial style:

final TextStyle initialStyle = TextStyle(
  fontSize: 20.0,
  color: Colors.grey,
  fontWeight: FontWeight.bold,
);

Then the final style:

final TextStyle finalStyle = TextStyle(
  fontSize: 22.0,
  color: Colors.black,
  fontWeight: FontWeight.bold,
);

We'll also use a boolean to handle the state of our text widget, whether it's tapped or not:

var isTapped = false;

Then, wrap the text widget inside the AnimatedDefaultTextStyle widget to enable a transition between your styles. Last, you can wrap all this in the InkWell widget with the boolean to switch between the styles on tap.

InkWell(
        onTap: isTapped = !isTapped,
        child: AnimatedDefaultTextStyle(
          style: isTapped ? finalStyle : finalStyle,
          duration: const Duration(milliseconds: 500),
          child: Text(
           "Hello World"
          ),
        ),
      )

The image below summarizes all.

Imgur

That's all for this post. Thanks for your attention :)

Discussion (0)

pic
Editor guide