Flutter - Criando um AlertDialog com animação Hero

Neste tutorial ensinarei a vocês como criar um AlertDialog no Flutter que funciona com a animação Hero. Acho que todos nós já nos frustramos com a tentativa de usar o Hero em dialogs, bottomsheet e nunca deram certo né?
Calma, vem comigo que lhe mostro em exemplo bem legal.

Spoiler no GIF hahaha!

Vamos ao código!

1. Na sua página principal coloque o Hero com flag star_alert_dialog envolvendo o Widget que deseja animar, como no exemplo abaixo, onde aplicamos no Icons.star.
   
   Sobre o placeholderBuilder, pode notar na imagem acima que aplicamos um Widget como placeholder; utilizamos esta função quando queremos exibir um Widget personalizado durante a animação.

2. Criei um arquivo chamado alert_dialog_widget, onde retornaremos um AlertDialog e um dos seus Widgets internos receberá a animação Hero, utilizamos a mesmo flag na página principal.
   

3. Agora vamos à navegação: para que o Hero funcione não podemos utilizar o showDialog do Flutter, é preciso que chamemos o alert_dialog_widget usando a navegação do Flutter; e para isso, utilizar-nos-emos do PageRouteBuilder. Para facilitar, extrairemos a navegação para uma extension do BuildContext e criaremos uma função chamada openDialog.
   

4. Volte à sua página principal. No botão que escolheu para chamar a navegação, basta adicionar o código abaixo:
   

Pronto! Agora podemos abrir páginas/dialogs no Flutter que suportam a animação Hero.

O meu Git.

Comments

[Felipe Sales]

muito bommm