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


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

Continuando a segunda parte do artigo veremos agora como usar o widget AnimatedOpacity.

Animação no Flutter com AnimatedOpacity

Se você precisar ocultar total ou parcialmente um widget, o widget AnimatedOpacity é uma ótima maneira de animar o desbotamento ao longo do tempo. O construtor AnimatedOpacity usa os argumentos duration, opacity, curve e argumentos filhos.

Este widget é uma versão animada do widget Opacity que transita automaticamente a opacidade de um filho por um período determinado sempre que a opacidade especificada for alterada.

Para obter um desvanecimento mais suave não precisamos usar o argumento curve.

Realizar uma animação de opacidade é uma operação onerosa porque requer redesenhar o filho em um buffer intermediário.

Recursos usados:

Usando o widget AnimatedOpacity

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

A seguir vamos criar neste arquivo um statefull widget chamado AnimatedOpacityWidget 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 AnimatedOpacityWidget extends StatefulWidget {
  @override
  _AnimatedOpacityWidgetState createState() => _AnimatedOpacityWidgetState();
}
class _AnimatedOpacityWidgetState extends State<AnimatedOpacityWidget> {

  double _opacidade = 1.0;
  void _animatedOpacity() {
      setState(() {
      _opacidade = _opacidade == 1.0 ? 0.3 : 1.0;
  });
}
  @override
  Widget build(BuildContext context) {
    return Container(      
    );
  }
}

Incluimos a variável privada _opcaidade e o método privado _animatedOpacity() que chama o setState() para notificar ao Flutter que o valor da variável mudou e assim a interface deve ser atualizada.

Quando a página for carregada a variável será atribuida com o valor 1.0 que indica visibilidade total, e, quando o FlatButton for tocado, a propriedade onPressed vai chamar o método _animatedOpacity().

Para calcular a opacidade do widget, usamos o operador ternário (?). Se o valor de _opacidade for 1.0, definimos
_opacidade para 0,3. Caso contrário, definimos como 1,0.

Agora vamos concluir o código definindo os widget AnimatedCrossFade como filho de um Stack que é filho de um Row:

import 'package:flutter/material.dart';
class AnimatedOpacityWidget extends StatefulWidget {
  @override
  _AnimatedOpacityWidgetState createState() => _AnimatedOpacityWidgetState();
}
class _AnimatedOpacityWidgetState extends State<AnimatedOpacityWidget> {
  double _opacidade = 1.0;
  void _animatedOpacity() {
      setState(() {
      _opacidade = _opacidade == 1.0 ? 0.3 : 1.0;
  });
}
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        AnimatedOpacity(
          duration: Duration(milliseconds: 500),
          opacity: _opacidade,
            child: Container(
              color: Colors.greenAccent,
                height: 100.0,
                width: 100.0,
                  child: FlatButton(
                    child: Text('Toque para Animar'),
                        onPressed: () {
                          _animatedOpacity();
                      },
                  ),
            ),
        ),
      ],
    );
  }
}

Vamos continuar usar o widget Row para conter os demais widgets.

A animação anima o valor da opacidade do widget filho AnimatedOpacity, que é um Container.

Dependendo do valor da opacidade, o widget Container aparece ou desaparece gradualmente. Um valor de opacidade de 1,0 é totalmente visível e um valor de opacidade de 0,0 é invisível.

Usamos um widget Container como filho do widget AnimatedOpacity e adicionamos um widget FlatButton como
um filho do widget Container onde no evento onPressed chamamos o método _animatedOpacity().

Assim, já temos tudo pronto para testar a nossa segunda animação. E vamos aproveitar para ver também as duas animações anteriores que criamos.

Abra o arquivo home.dart e inclua o código destacado em azul abaixo :

import 'package:flut_anima1/animated_container.dart';
import 'package:flut_anima1/animated_crossfade.dart';
import 'package:flut_anima1/animated_opacity.dart';
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
   return Scaffold(
        appBar: AppBar(
          title: Text('AnimatedCrossFade'),
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            AnimatedContainerWidget(),
            Divider(),
            AnimatedCrossFadeWidget(),
            Divider(),
            AnimatedOpacityWidget(),
          ],
         )
       ),
    );
  }
}

No argumento body usamos o widget SafeArea que é um widget Padding que evita sobreposição ou bloqueamento do widget usado.

A seguir definimos um widget Column onde definimos as chamadas a cada widget de animação que já criamos até agora, sendo que eles estão separados por um widget Divider() que inclui uma linha horizontal fina com preenchimento em ambos os lados.

Executando o projeto teremos o resultado abaixo:

       

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

"Qual é mais fácil? Dizer ao paralítico: Estão perdoados os teus pecados, ou dizer: Levanta-te, toma o teu leito e anda?
Ora, para que saibais que o Filho do Homem tem sobre a terra autoridade para perdoar pecados — disse ao paralítico:  Eu te mando: Levanta-te, toma o teu leito e vai para tua casa."

Marcos 2:9-11

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