CODEWITHSUNDEEP
animationflutter
Mohamed M. Abo Elmagd
Mohamed M. Abo Elmagd

Reputation: 113

Flutter - Animation Text Fade transition

i wanna make a fade transition on two text , what i mean the value change from text to another by animation ... for example one .. two .. and repeat this value again and again

and that's what i tried to make 

Container(
        alignment: Alignment.center,
        width: 150,
        height: 50,
        child: FadeTransition(
          opacity: controller2,
          child: Text('Breathe in ',textDirection: TextDirection.ltr,style: TextStyle(color: Colors.white,fontSize: 30,),),
        ),
        color: Colors.red,


 ),

How Can I Achieve This ?

Upvotes: 10

Views: 15365

Answers (1)

Evaldo Bratti
Evaldo Bratti

Reputation: 7658

I think you can solve this using AnimatedOpacity, where it automatically animates, fading opacity in and out.

This sample code stacks 2 widgets, one red and one black, alternating which one have full opacity.

double opacity = 1.0;

@override
void initState() {
  super.initState();
  changeOpacity();
}

changeOpacity() {
  Future.delayed(Duration(seconds: 1), () {
    setState(() {
      opacity = opacity == 0.0 ? 1.0 : 0.0;
      changeOpacity();
    });
  });
}

Widget build(BuildContext context) {
  return Stack(
    children: <Widget>[
      AnimatedOpacity(
        opacity: opacity,
        duration: Duration(seconds: 1),
        child: Container(
          color: Colors.black,
        ),
      ),
      AnimatedOpacity(
        opacity: opacity == 1 ? 0 : 1,
        duration: Duration(seconds: 1),
        child: Container(
          color: Colors.red,
        ),
      ),
    ]
  );
}

Upvotes: 14

Related Questions