Flutter DecoratedBoxTransition example

Last updated on July 12, 2022 A Goodman Loading... Post a comment

In general, the DecoratedBoxTransition widget usually goes with the following widgets/classes:

  • AnimationController
  • DecorationTween
  • BoxDecoration

Below is a complete example of using the DecoratedBoxTransition widget in a Flutter application.


This example creates a circle whose color, shape, shadow, and border change over time.


The full code:

// main.dart
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 {
  // animation controller
  late AnimationController _controller;

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

  // dispose _controller
  void dispose() {

// decoration tween
  final DecorationTween _decorationTween = DecorationTween(
      // beginning values (color, shape, boxShadow, border)
      begin: BoxDecoration(
          color: Colors.yellow,
          shape: BoxShape.circle,
          boxShadow: const [
            BoxShadow(offset: Offset(0, 0), blurRadius: 30, spreadRadius: 0)
          border: Border.all(width: 10, color: Colors.orange)),
      // ending values
      end: BoxDecoration(
          color: Colors.purple,
          shape: BoxShape.circle,
          boxShadow: const [
            BoxShadow(offset: Offset(20, 20), blurRadius: 30, spreadRadius: 0)
          border: Border.all(width: 50, color: Colors.red)));

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // implement DecoratedBoxTransition
        child: DecoratedBoxTransition(
          decoration: _decorationTween.animate(_controller),
          child: const SizedBox(
            width: 250,
            height: 250,

Note: To be able to use vsync: this, the private State class needs to go with the TickerProviderStateMixin class.

Further reading:

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

Notify of
Inline Feedbacks
View all comments

Related Articles