9.9 C
New York
Wednesday, March 22, 2023

Flutter: FadeTransition example

A simple example of implementing FadeTransition in Flutter.

App Preview

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

The Complete Code

// main.dart
import 'package:flutter/material.dart';

void main() {

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

class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  void initState() {
    _controller =
        AnimationController(duration: 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(
      child: FadeTransition(
        opacity: _animation,
        child: Container(
          width: 300,
          height: 300,
          color: Colors.purple,

You can read also Using Animation Controller in Flutter, Flutter TweenAnimationBuilder Examples, Flutter DecoratedBoxTransition example, 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.


Related Articles


Please enter your comment!
Please enter your name here

Latest Articles