0

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.

2 Answers 2

2

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))),
      ),
    );
  }
}
3
  • Thank you for your help, I didn't know that. :D Thank you for that it really helps but now I am more confused since to change the state I read that we need to use statefulWidget and you have achieved it without it. can you please tell me what is the logic. Mar 7, 2021 at 17:12
  • 1
    @AthosTokbi In Implicit animations, you are not the one managing the animation states. TweenAnimationBuilder has its own underlying state: AnimatedWidgetBaseState where flutter handles the state of the animation.
    – Tayo.dev
    Mar 8, 2021 at 7:34
  • Okay, Thank you! Your explanation is much better than the documentation of dev. :) Mar 8, 2021 at 7:36
2

For this you can useAnimatedTextStyle Var _size = 10;

      AnimatedDefaultTextStyle(
      duration: Duration(milliseconds: 400),
      style: TextStyle(fontSize: _size),
      child: Text('this is a test'),
     );

Just call setState and change _size

1
  • I have tried the code which you have shared but I am only able to see the Amber screen the text is not being animated. Mar 7, 2021 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.