How To Create Fade In Fade Out Animation Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 02-11-2020

I am assuming, you are looking to get a FadeIn & FadeOut animation on your container.There are a few things you need to change.The FadeTransition class should not take the animation for opacity, rather it should be the _fadeInFadeOut variable The animation starts, when you call the animation.forward() rather than animation.repeat() (Since in your case, you also need to reverse the animation, always start with the animation.forward() call).Make sure to use the addStatusListener() method instead of addListener() since you get much better control over your states.So, all of this put together, below is the working code to make your animation work.

How To Create Fade In Fade Out Animation Using Flutter App

Fade In Fade Out Animation
Complete Code For Fade In Fade Out Animation In Flutter
main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Transform',
      home: new MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    )..addListener(() => setState(() {}));

    animation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(animationController);

    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[100],
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
          title: Text("Fade In Fade Out"
          )),
      body: Center(
        child: FadeTransition(
          opacity: animation,
          child: Container(
            child: Center(child: Text('Bajarangisoft.com',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                  fontWeight: FontWeight.bold),
            )),
            color: Colors.blue[900],
            height: 150,
            width: 150,
          ),
        ),
      ),
    );
  }
}


 

Related Post