DecoratedBoxTransition Widget – Definição, Propriedades e Como Usar?

Publicado em 29/11/2022 por cacpnrj

Tempo de leitura: 2 minutes

DecoratedBox Widget em Material Design pinta uma decoração em outra caixa como um Container Widget que é filho de DecoratedBox. Assim como um Widget DecoratedBox, o Flutter tem um novo widget chamado DecoratedBoxTransition Widget que é usado para animar diferentes propriedades de sua Decoração.

O que é o Widget DecoratedBoxTransition?

DecoratedBoxTransition Widget é uma versão animada de uma DecoratedBox que anima as diferentes propriedades de sua Decoração.

Construtor padrão para ele terá um trecho de código abaixo.

const DecoratedBoxTransition(
 {Key? key,
 required Animation decoration,
 DecorationPosition position = DecorationPosition.background,
 required Widget child}
)

No Construtor acima, todos os campos marcados com obrigatório não devem estar vazios, portanto decoração e posição não devem ser nulos em nosso construtor.

Propriedades:

Key: controla como um widget substitui outro widget na árvore. Uma chave é um identificador para Flutter Widgets, Elements e SemanticsNodes. Um novo widget só será usado para atualizar um elemento existente se sua chave for a mesma do widget atual associado ao elemento.
Animation Decoration: Este atributo é utilizado para a Animação da decoração a pintar. Ele pode ser criado usando uma interpolação DecorationTween normalmente entre dois BoxDecoration.
DecorationPosition Position: Este atributo é usado para definir se a decoração da caixa deve ser pintada atrás ou na frente da criança.
Widget Child: O widget abaixo deste widget na árvore. Ele terá apenas um widget de um filho. Para alocar vários filhos, os usuários devem usar o Widget de linha ou o Widget de coluna e agrupar todos os filhos no Widget de linha ou Widget de coluna.

Como usar o widget DecoratedBoxTransition?

O trecho de código a seguir nos diz como implementar o DecoratedBoxTransition Widget no Flutter.

import 'package:flutter/material.dart';

class DecoratedBoxTransitionWidget extends StatefulWidget {
  const DecoratedBoxTransitionWidget({super.key});

 @override
 _DecoratedBoxTransitionWidgetState createState() =>
     _DecoratedBoxTransitionWidgetState();
}

class _DecoratedBoxTransitionWidgetState
   extends State with TickerProviderStateMixin {
 
late AnimationController _controller;
  bool _first = true;
  final DecorationTween decorationTween = DecorationTween(
    begin: BoxDecoration(
      color: const Color(0xFFFFFFFF),
      border: Border.all(
        color: const Color(0xFF000000),
        style: BorderStyle.solid,
        width: 4.0,
      ),
      borderRadius: BorderRadius.zero,
      shape: BoxShape.rectangle,
      boxShadow: const [
        BoxShadow(
          color: Color(0x66000000),
          blurRadius: 10.0,
          spreadRadius: 4.0,
        )
      ],
    ),
    end: BoxDecoration(
      color: const Color(0xFF000000),
      border: Border.all(
        color: const Color(0xFF202020),
        style: BorderStyle.solid,
        width: 1.0,
      ),
      borderRadius: BorderRadius.circular(10.0),
      shape: BoxShape.rectangle,
      // No shadow.
    ),
  );
 
  @override
  initState() {
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Exemplo de Transição DecoratedBox"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            DecoratedBoxTransition(
              position: DecorationPosition.background,
              decoration: decorationTween.animate(_controller),
              child: Container(
                width: 200,
                height: 200,
                padding: const EdgeInsets.all(20),
                child: const FlutterLogo(),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: () {
                if (_first) {
                  _controller.forward();
                } else {
                  _controller.reverse();
                }
                _first = !_first;
              },
              child: const Text(
                "Clique em mim!",
              ),
            )
          ],
        ),
      ),
    );
  }
}