How to use Decorated Box Transition in Flutter

The DecoratedBoxTransition Widget is the Animated version of the DecoratedBox Widget. By default the DecoratedBox is not animated. It inherits from the Decoration class.

In addition it is an example of Explicit Animation. Not an Implicit Animation.

Firstly, we always want to make the Flutter Application look better. To do that, we need to decorate the Container widget.

Why?

Because the Container widget ships with a “decoration” property. As a result, the “decoration” property returns the BoxDecoration Widget.

What does it do?

The BoxDecoration class helps us to draw a box. Consequently, we can use decorations to change the look of a container.

The DecoratedBoxTransition Widget mainly uses the BoxDecoration class as the animation begins and ends. And to that, it uses the DecorationTween class.

What does the DecorationTween class does? It maintains an interpolation between two Decorations.

In fact, the DecorationTween class has two arguments that controls this process.

final DecorationTween beginAndEndDecoration = DecorationTween(
    begin: BoxDecoration(
...
),
 end: BoxDecoration(
...
),

As we can see, the Decoration Tween mainly works on the BoxDecoration Widgets. So that at the beginning of the animation, we see one decoration. And, at the end of animation, the decoration changes.

To repeat the Animation we want the Animation Controller.

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

Finally, we combine these Animation objects and pass it as the “decoration” argument of the DecoratedBoxTransition Widget.

child: DecoratedBoxTransition(
          decoration: beginAndEndDecoration.animate(_controller),
...

As a result, in the beginning we see one kind of decoration. As the time goes by, it changes from the initial decoration to the final decoration.

The above image gives us an idea of how the initial phase of animation might look like.

We have used an Image Widget and its background changes.

As the animation starts, the background also starts changing.

Before we get a final view, let us take a look the full code snippet.

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 DecoratedBoxTransitionExample(),
      ),
    );
  }
}

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

  @override
  State<DecoratedBoxTransitionExample> createState() =>
      _DecoratedBoxTransitionExampleState();
}

class _DecoratedBoxTransitionExampleState
    extends State<DecoratedBoxTransitionExample> with TickerProviderStateMixin {
  final DecorationTween beginAndEndDecoration = DecorationTween(
    begin: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          Colors.red.withOpacity(0.7),
          Colors.red,
        ],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      borderRadius: BorderRadius.circular(15),
    ),
    end: BoxDecoration(
      color: Colors.blue,
      border: Border.all(
        color: Colors.red,
        width: 2.0,
        style: BorderStyle.solid,
      ),
      borderRadius: const BorderRadius.all(Radius.circular(40.0)),
      boxShadow: const [
        BoxShadow(
          color: Colors.black54,
          blurRadius: 20.0,
          spreadRadius: 20.0,
        ),
      ],
      gradient: const LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [
          Colors.red,
          Colors.white,
        ],
      ),
    ),
  );

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: DecoratedBoxTransition(
          decoration: beginAndEndDecoration.animate(_controller),
          child: Container(
            padding: const EdgeInsets.all(10),
            width: 100,
            height: 100,
            child: Image.network(
                'https://cdn.pixabay.com/photo/2021/11/13/23/06/tree-6792528_960_720.jpg'),
          ),
        ),
      ),
    );
  }
}

Before the final code, we have seen how the different type of Animation objects work together.

Subsequently, a final animation is rendered.

However, it starts repeating the process again.

For more Animation related Code please visit the branches of this GitHub Repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter