Flutter animation with Text going from big to small

Issue

I am beginner level with flutter dart. I have check out some videos on how I can implement an animation.

I am trying to animate a Text where when the app startup the text where its the name of my APP going from Big text to small text.

here is my code, if there is any expert who can guide and correct my code I would really appreciate
:

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin{

   AnimationController controller;
   Animation<double> anima;
   double h=700;
 @override
 void initState() {
  super.initState();
  controller= AnimationController(vsync: this,
  duration: Duration(milliseconds: 600));
  controller.forward();

}

 @override
  Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.amber,
    body: AnimatedContainer(
    width: h != null ? 100 : 700,
    curve: Curves.bounceInOut,
    child: Text('here you are', style: TextStyle(color: Colors.white)),
   ),
  );
 }

  @override
   void dispose() {
    controller.dispose();
    super.dispose();
  }
} 

I am trying to achieve something like in the pic from pic one to the last one going from big text to small.

from pic 1 to pic 5

enter image description here

enter image description here
enter image description here
enter image description here
enter image description here

I would really appreciate it, I know its not that difficult for you all there, but for me its really kinda hard to do it. Thank you.

Solution

This can be easily achieved using Implicit animation widget: TweenAnimationBuilder.

And guess what? 😁 You don’t need a StatefulWidget

Checkout this working sample.

class AnimTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: TweenAnimationBuilder(
        duration: const Duration(seconds: 5),
        tween: Tween(begin: 700.0, end: 100.0),
        builder: (context, value, child) => Center(
            child: Text('here you are',
            textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white, fontSize: value))),
      ),
    );
  }
}

Answered By – Tayo.dev

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.