How to fade transition in Flutter

Can we fade the transition effect in Flutter in many ways? The answer is, yes, we can. However, they are not similar in nature.

A few of them is Implicit Animation. And others are Explicit Animation.

We have already discussed the main difference between these two Animations in Flutter. Still, to sum up, the Implicit Animation is much faster as Flutter ships them in.

On the contrary, we need to use the FadeTransition Widget with the help of other Animation Widgets. That is why we call it Explicit Animation.

Basically, the FadeTransition widget animates the Opacity of the Child Widget. Let us take a quick look at how it works.

That will clarify how the FadeTransition widget works.

The Parent Red Container has the Fade Transition Widget inside. The FadeTransition widget fades the Opacity of the Child Container which is Yellow.

With the help of the FadeTransition widget we are able to hide and and show the Yellow Container over a certain period of time.

Firstly, we need to create an Animation Controller. The AnimationController has the duration argument. Where we can control the time of fade transition.

late final AnimationController _animationController = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);

We can also make it repeat.

After that, we need to pass this Animation Controller as the “parent” argument to the CurvedAnimation class.

late final Animation<double> _curvedAnimation = CurvedAnimation(
    parent: _animationController,
    curve: Curves.bounceInOut,
  );

Here the “Type” of the Animation object plays the most important role.

Why?

Because the Opacity is “double” Type.

And finally, we pass this Animation variable to the “opacity” argument of the FadeTransition Widget.

FadeTransition(
        opacity: _curvedAnimation,
        child: Padding(
...

To fade the transition, we need to maintain these steps. They are related. Moreover, they do not come by default like any Implicit Animation.

Let us see the full code.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Fade Transition';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const FadeTransitionExample(),
      ),
    );
  }
}

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

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

class _FadeTransitionExampleState extends State<FadeTransitionExample>
    with TickerProviderStateMixin {
  late final AnimationController _animationController = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<double> _curvedAnimation = CurvedAnimation(
    parent: _animationController,
    curve: Curves.bounceInOut,
  );

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(20),
      width: 100.0,
      height: 100.0,
      color: Colors.red,
      child: FadeTransition(
        opacity: _curvedAnimation,
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Container(
            width: 50.0,
            height: 50.0,
            color: Colors.yellow,
          ),
        ),
      ),
    );
  }
}

As a result, the FadeTransition widget animates the opacity of the Yellow Container.

Animates the opacity of a widget.

All we need to remember that the opacity is animated by the CurvedAnimation set to Curve const bounceInOut.

It is nothing but an oscillating curve that first grows and then shrink in magnitude.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter