Fade Transition in Flutter.

Priyanka Kumari

30 June 2023

Use Fade Transition in Flutter class is a widget for helping the user to make a selection in material design. It is automatically animated between the sizes of two children, fading between them, see Fade Transition.

In Flutter, The Fade Transition is used when you need to give a fade kind of transition. It also

Its Opacity does not animate changes in opacity.
AnimatedOpacity, which animates changes in opacity without taking an explicit Animation argument.
SliverFadeTransition is the sliver version of this widget.

You can find out more about the Flutter app development services page.

To implement the Fade Transition do follow the steps mentioned below.

1.) Create a Scaffold.

2.) Create the Controller and Animation for the widget.

3.) Use the Fade Transition widget.

1.) Create a Scaffold. :

Inside Scaffold widgets, it Implements the basic material design visual layout structure. First, initialize the main app as a stateless widget.

This class provides APIs for showing drawers and bottom sheets. We can add the background color inside the scaffold widget.

It also supports special Material Design components, such as Drawers, AppBars, and SnackBars.

  void main() {
    runApp(const FadeInTransitionScreen());
  }

class FadeInTransitionScreen extends StatefulWidget {
  FadeInTransitionScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<FadeInTransitionScreen> createState() => _FadeInTransitionScreenState();
}

void main() {

runApp(const FadeInTransitionScreen());

}

class FadeInTransitionScreen extends StatefulWidget {

FadeInTransitionScreen({

Key? key,

}) : super(key: key);

@override

State<FadeInTransitionScreen> createState() => _FadeInTransitionScreenState();

}

2.) Create the Controller and Animation for the widget.

Now, to change the widget 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 a duration argument.

  late AnimationController _controller;
  late Animation _animation;

1 2	late AnimationController _controller; late Animation _animation;

3.) Use the Fade Transition widget.

In Fade Transition widget cross-fades between two given children and animates itself between their sizes. Inherit the SingleTickerProviderStateMixin to the state.

The full code is mentioned below.

import 'package:flutter/material.dart';
import '../../../../mobikul/app_widgets/app_bar.dart';

class FadeInTransitionScreen extends StatefulWidget {
  FadeInTransitionScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<FadeInTransitionScreen> createState() => _FadeInTransitionScreenState();
}

class _FadeInTransitionScreenState extends State<FadeInTransitionScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  @override
  void initState() {
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    _controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).cardColor,
      appBar: commonAppBar(
        "Fade Transition",
        context,
      ),
      body: buildUi(),
    );
  }

  Widget buildUi() {
    return Column(
      children: [
        Expanded(child: buildChatUi()),
        // buildBottomView()
      ],
    );
  }

  Widget buildChatUi() {
    return Container(
      child: Center(
        child: FadeTransition(
            opacity: _animation as Animation<double>,
            child: Center(
                child: Container(
              width: 100,
              height: 100,
              color: Colors.orange,
            ))),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import '../../../../mobikul/app_widgets/app_bar.dart';

class FadeInTransitionScreen extends StatefulWidget {

FadeInTransitionScreen({

Key? key,

}) : super(key: key);

@override

State<FadeInTransitionScreen> createState() => _FadeInTransitionScreenState();

}

class _FadeInTransitionScreenState extends State<FadeInTransitionScreen>

with SingleTickerProviderStateMixin {

late AnimationController _controller;

late Animation _animation;

@override

void didChangeDependencies() {

super.didChangeDependencies();

}

@override

void initState() {

_controller = AnimationController(

duration: Duration(seconds: 2),

vsync: this,

);

_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);

_controller.forward();

super.initState();

}

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Theme.of(context).cardColor,

appBar: commonAppBar(

"Fade Transition",

context,

body: buildUi(),

);

}

Widget buildUi() {

return Column(

children: [

Expanded(child: buildChatUi()),

// buildBottomView()

);

}

Widget buildChatUi() {

return Container(

child: Center(

child: FadeTransition(

opacity: _animation as Animation<double>,

child: Center(

child: Container(

width: 100,

height: 100,

color: Colors.orange,

))),

);

}

We can now run the app on how to create Fade Transition in a flutter.

Finally, we have implemented the flow of creating a Fade Transition in a flutter.

Hope this blog helps you to create Fade Transition in a flutter.

So, I hope it will help you out in understanding and get a brief idea about it.

You can also check these links.

Another mentioned URL.

For more understanding please can go through this Link :

That’s all.

Thank you very much.