Flutter - Using FadeTransition Widget Examples

This tutorial is about how to use FadeTransition widget in Flutter which can be used to animate the opacity of a widget.

FadeTransition is a widget that animates the opacity of a child widget. With this widget, you can create a fading animation to show or hide a widget. Below are some examples of how to use it.

Creating FadeTransition Animation

  const FadeTransition({
    Key key,
    @required this.opacity,
    this.alwaysIncludeSemantics = false,
    Widget child,
  })

For this type of transition, what you have to pass is an Animation<double> that defines the animation to be applied to the child widget. Creating an Animation requires you to create an AnimationController. First, you need to make your class extends State with TickerProviderStateMixin. That enables you to pass this as the vsync argument in the constructor of AnimationController.

In the controller, you can control the opacity of the widget by setting the values for lowerBound, upperBound, and value. lowerBound is the smallest value for the animation at which this animation is deemed to be dismissed, defaults to 0.0. upperBound is the largest value for the animation at which this animation is deemed to be completed, defaults to 1.0. value is the initial value of the animation, defaults to lowerBound. For fade transition, a value of 0.0 means the opacity is 0% in which condition the widget is invisible. A value of 1.0 means the opacity is 100%. To set how long the animation should be played, you can pass a Duration instance as duration argument.

After that, you can create the Animation instance. This example uses a CurvedAnimation with fastOutSlowIn curve.

Another thing you need to do is adding a code for disposing the controller inside dispose().

Here's an example that creates a fade transition.

  import 'package:flutter/material.dart';
  import 'package:flutter/animation.dart';
  
  class _FadeTransitionExampleState extends State<_FadeTransitionExample> with TickerProviderStateMixin {
  
    AnimationController _controller;
    Animation<double> _animation;
  
    initState() {
      super.initState();
  
      _controller = AnimationController(
          duration: const Duration(milliseconds: 5000),
          vsync: this,
          value: 0,
          lowerBound: 0,
          upperBound: 1
      );
      _animation = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
  
      _controller.forward();
    }
  
    @override
    dispose() {
      _controller.dispose();
      super.dispose();
    }
  
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: FadeTransition(
            opacity: _animation,
            child: Center(
              child: Text('Woolha.com', style: TextStyle(color: Colors.teal, fontSize: 50)),
            ),
          ),
        ),
      );
    }
  }

Output:

Full Code

Below is the full code of this tutorial

  import 'package:flutter/material.dart';
  import 'package:flutter/animation.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _FadeTransitionExample(),
      );
    }
  }
  
  class _FadeTransitionExample extends StatefulWidget {
    _FadeTransitionExampleState createState() => _FadeTransitionExampleState();
  }
  
  class _FadeTransitionExampleState extends State<_FadeTransitionExample> with TickerProviderStateMixin {
  
    AnimationController _controller;
    Animation<double> _animation;
  
    initState() {
      super.initState();
  
      _controller = AnimationController(
          duration: const Duration(milliseconds: 5000),
          vsync: this,
          value: 0,
          lowerBound: 0,
          upperBound: 1
      );
      _animation = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
  
      _controller.forward();
    }
  
    @override
    dispose() {
      _controller.dispose();
      super.dispose();
    }
  
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: FadeTransition(
            opacity: _animation,
            child: Center(
              child: Text('Woolha.com', style: TextStyle(color: Colors.teal, fontSize: 50)),
            ),
          ),
        ),
      );
    }
  }

  

Output:

FadeTransition Properties

• Key key: The widget's key, used to control if it should be replaced.
• Animation<double> opacity *: The animation that controls the fade transition of the child.
• bool alwaysIncludeSemantics : Whether the semantic information of the children is always included. Defaults to false.
• Widget child: The widget under this widget in tree where the animation will be applied.

*: required

You can also read about:

• ScaleTransition, which is used to create scale transition animation.
• SlideTransition, which is used to create slide transition animation.
• RotationTransition, which is used to create rotation transition animation.
• SizeTransition, which is used to animate the size of a widget by clipping and aligning the widget.