Flutter: FadeTransition example

Last updated on July 11, 2022 A Goodman Loading... One comment

A simple example of implementing FadeTransition in Flutter.

App Preview

This example creates a purple box with an opacity that changes continuously over time.

The Complete Code

// kindacode.com
import 'package:flutter/material.dart';

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

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

  Widget build(BuildContext context) {
    return const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),

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

  State<HomePage> createState() => _HomePageState();

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  // controller
  late AnimationController _controller;

  // animation
  late Animation<double> _animation;

  void initState() {
    _controller =
        AnimationController(duration: const Duration(seconds: 5), vsync: this)
          ..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: 1).animate(_controller);

  void dispose() {

  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      // implement the FadeTransiition widget
      child: FadeTransition(
        opacity: _animation,
        child: Container(
          width: 300,
          height: 300,
          color: Colors.purple,

That’s it. You can read also Using Animation Controller in Flutter, Flutter TweenAnimationBuilder Examples, Flutter DecoratedBoxTransition example, and Example of using AnimatedContainer in Flutter to learn more about animation in Flutter.

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Notify of
1 Comment
Inline Feedbacks
View all comments
1 year ago

good material

Related Articles