Smooth transition with text styles in Flutter

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.

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