Flutter FadeTransition Examples

FadeTransition is a neat Flutter widget that animates the opacity of its child. This widget can be set with a fading animation to reveal or hide a widget.

To change the animation for a child widget, you must pass in an Animation<double> object to define what needs to be applied.

import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);

  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> with SingleTickerProviderStateMixin{

  late final AnimationController _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 2),
  );

  late final Animation<double> _animation1 = CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.0, 0.4,
      curve: Curves.easeInCirc,
    ),
  );
  late final Animation<double> _animation2 = CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.4, 0.8,
      curve: Curves.easeInCirc,
    ),
  );
  late final Animation<double> _animation3 = CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.8, 1,
      curve: Curves.easeInCirc,
    ),
  );




  FadeTransition _card(int index, Animation<double> animation){
    return FadeTransition(
      opacity: animation,
      child: Card(
        elevation: 3,
        color: Colors.green,
        child: Container(
          padding: EdgeInsets.all(8.0),
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Header $index', style: TextStyle(fontSize: 18.0, color: Colors.amberAccent)),
              Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae cursus libero. Donec quis tellus sed risus aliquam cursus vitae eget nibh', style: TextStyle(color: Colors.white)),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _card(1, _animation1),
            _card(2, _animation2),
            _card(3, _animation3),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if(_controller.status == AnimationStatus.completed){
            _controller.reverse();
          } else{
            _controller.forward();
          }
        },
        backgroundColor: Colors.green,
        child: Icon(Icons.play_arrow),
      ),
    );
  }

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

}