Flutter Fade Animation Example

#Flutter Fade Animation Example

import 'package:flutter/material.dart';
 
class AnimationEx01 extends StatefulWidget {
  _AnimationEx01State createState() => _AnimationEx01State();
}
 
class _AnimationEx01State extends State<AnimationEx01> {
  bool _visible;
 
  @override
  void initState() {
    super.initState();
    _visible = true;
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('AnimationEx01'),
        ),
        body: Center(
          child: AnimatedOpacity(
            opacity: _visible ? 1.0 : 0.0,
            duration: Duration(milliseconds: 500),
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Colors.green,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Make sure we call setState! This will tell Flutter to rebuild the
            // UI with our changes!
            setState(() {
              _visible = !_visible;
            });
          },
          tooltip: 'Toggle Opacity',
          child:
              _visible ? Icon(Icons.flip_to_front) : Icon(Icons.flip_to_back),
        ),
      ),
    );
  }
}