Flutter - Incluindo animação na sua aplicação - IV

Nesta série de artigos vamos mostrar como podemos adicionar animação na nas aplicações Flutter.

Continuando a terceira parte do artigo veremos agora como usar o widget AnimatedDefaultTextStyle.

Animação no Flutter com AnimatedDefaultTextStyle

O widget AnimatedDefaultTextStyle é uma versão animada do DefaultTextStyle que transita automaticamente o estilo de texto padrão (o estilo de texto a ser aplicado aos widgets de Texto descendentes sem estilo explícito) por um período determinado sempre que o estilo especificado for alterado.

As propriedades textAlign, softWrap, textOverflow e maxLines não são animadas e entram em vigor de imediato  quando alteradas.

Para realizar uma animação simples de texto este widget é uma boa opção e funciona de maneira muito semelhante a AnimatedContainer e AnimatedCrossFade que já vimos anteriormente.

Recursos usados:

Usando o widget AnimatedDefaultTextStyle

Vamos continuar a usar o projeto criado na primeira parte do artigo aproveitando a estrutura básica e criando apenas um arquivo chamado AnimatedDefaultTextStyle.dart na pasta lib.

A seguir vamos criar neste arquivo um statefull widget chamado AnimatedDefaultTextStyleWidget seguindo o mesmo procedimento.(Digite stf e selecione o template...)

No widget criado vamos incluir o código destacado em azul abaixo:

import 'package:flutter/material.dart';
class AnimatedDefaultTextStyleWidget extends StatefulWidget {
  @override
  _AnimatedDefaultTextStyleWidgetState createState() => _AnimatedDefaultTextStyleWidgetState();
}
class _AnimatedDefaultTextStyleWidgetState extends State<AnimatedDefaultTextStyleWidget> {
  
  var _color = Colors.red;
  var _fontSize = 20.0;
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment : MainAxisAlignment.center,
        children : [
          AnimatedDefaultTextStyle(
            duration : const Duration(seconds : 1),
            style : TextStyle(
                color : _color, fontSize : _fontSize
            ),
            child : Text("Macoratti.net")
          ),
          RaisedButton(
            child : Text("Quase tudo para a plataforma .NET"),
            onPressed : () {
              _color = Colors.blue;
              _fontSize = 40.0;
               setState(() {});
            }
          )
        ]
      );
  }
}

Incluimos as variáveis privadas _color e _fontSize para definir os valores iniciais da cor e do tamanho da fonte do texto que será animado.

No exemplo o texto que é filho de AnimatedDefaultTextStyle é ampliado em 100% e sua cor mudará ao longo de 1 segundo.

Executando o projeto teremos o resultado abaixo:

       

Na próxima parte do artigo veremos como usar o widget AnimationController.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti