DEV Community: Leonardo Serrano

Flutter - Criando um AlertDialog com animação Hero

Leonardo Serrano — Sat, 10 Jun 2023 11:24:37 +0000

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!

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.
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.
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.
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.

[PT-BR] Extras do Hero Animation no Flutter

Leonardo Serrano — Sat, 09 Apr 2022 13:38:54 +0000

Olá amigos, vocês sabiam que podemos aplicar um widget durante a transição do Hero animation no Flutter ?
É isto que vamos ver aqui hoje, olha como fica:

O primeiro passo é dar uma olhada na primeira parte do tutorial, para que conheça o Hero Animation e possa fazer o projeto, pois é a partir dele que vamos avançar.
É bem rápido e pratico, leva alguns minutos.

Link: [PT-BR] Utilizar Hero Animation no Flutter

Ok, agora que já fez isto vamos avançar.
Nosso primeiro passo é baixar o Gif do nosso querido Dash, aqui:

Depois de baixar, vamos ao arquivo "pubspec.yaml" e liberar o acesso aos assets. Ficará assim:

Agora na Raiz do projeto vamos criar a pasta assets e mover o ficheiro gif lá para dentro. Ficará assim:

Agora vamos importar um packge para auxiliar o uso do Gif.
Gif_view
Agora basta adicionar ao projeto, assim:

Você pode precisar reiniciar o projeto para que o ficheiro seja reconhecido.

Ok, a configuração está feita, vamos aos códigos.

No arquivo main.dart vamos até o nosso segundo ElevatedButton para ter acesso a nossa Hero Animation.
Dentro do Widget Hero, nos vamos usar a função chamada flightShuttleBuilder que vai nos permitir colocar um Widget para ser exibido durante a transição da animação.

Ficara assim:

No arquivo page2.dart no Widget FlutterLogo defina o size para 50 para visualizar melhor.

Agora está quase pronto. Para que consiga visualizar melhor a animação e se tudo funciona bem, vamos até a função _nextPageSlow e definir o transitionDuration para 5000 milliseconds, assim vamos visualizar melhor.

Abaixo o repositório para estudo mais aprofundado do funcionamento do Hero:
Link

Agradeço sua leitura, espero que tenha gostado. 🤩

[PT-BR] Facilitando telas de loading com Asyncstate no Flutter

Leonardo Serrano — Mon, 07 Feb 2022 17:05:34 +0000

Olá amigos, neste artigo vou ensinar a utilizar um package chamado "Asyncstate", cuja finalidade é nos ajudar a chamar telas de loading com extrema facilidade.

Link: Asyncstate

O que o "Asyncstate" faz?
Através de uma "Extension" ou um "Mixin" ... o package inicia sua tela de loading ao mesmo tempo que inicia sua chamada assíncrona, mantendo a tela enquanto a chamada esta em execução e quando finalizada ele fecha a tela de loading para você.

Chega de variáveis do tipo "isLoading =false" ou "isLoading =true" ... rsrs

Vamos aos códigos ...

Importe o package:

asyncstate: ^0.0.3

Agora no "main.dart" você deve adicionar o "AsyncState.observer" no navigatorObservers:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      themeMode: ThemeMode.dark,
      navigatorObservers: [
        AsyncState.observer // !!!!!
      ], 
      theme: ThemeData.dark(),
      home: HomePage(),
    );
  }
}

Por padrão o package irá utilizar o "CircularProgressIndicator" para android e "CupertinoActionSheet" para iOS. Mas você pode edita-lo e ter o próprio loader, assim:

void main() {
  AsyncState.setLoaderPersonalized(
    defaultLoaderWidget: const MyLoading(), // !!!
  );
  runApp(const MyApp());
}

Dica: Pode alterar o loader em outra dependência de inicialização, por exemplo uma binding.

Agora em seu arquivo controller ... você pode utilizar Mixin ou Extensões.

Mixin:
Envolva sua chamada com a função "callAsyncLoader" fornecida pelo Mixin.

class HomeController with AsyncStateMixin {

  Future goBack(Function callback) async {
    return await callAsyncLoader(
      Future.delayed(
        const Duration(seconds: 3),
        () {
          callback();
        },
      ),
    );
  }
}

Extensão:
Adicione a extensão ".asyncLoader()" ao fim de sua chamada.

Future<bool> login() async {
    try {
      return await Future.delayed(const Duration(seconds: 3), () {
     return true;
      }).asyncLoader();
    } catch (e) {
      // debugPrint(e.toString());
      return false;
    }
  }

Bônus: (Loading personalizado função.)
O package permite personalizar um loader para função especifica.

 Future<bool> login() async {
    try {
      return await Future.delayed(const Duration(seconds: 3), () {
        return true;
      }).asyncLoader(
          customLoader: const MyCustomLoadingWidget(
        text: 'Sign in! Hold on!!!!',
      ));
    } catch (e) {
      // debugPrint(e.toString());
      return false;
    }
  }
}

Pronto, com uma sintaxe simples você não precisa mais se preocupar com suas telas de loading enquanto faz chamadas assíncronas.

Exemplo: App Exemplo
Agradeço sua leitura, espero que tenha gostado. 🤩

[PT-BR] Utilizar Hero Animation no Flutter

Leonardo Serrano — Mon, 19 Jul 2021 21:16:57 +0000

Olá amigos, hoje vou mostrar como é simples utilizar a animação Hero do Flutter. Sabe aquela animção de transição de pagina onde o item se "move" junto e se posiciona em algum lugar da pagina, então, é isso que vamos aprender.

Este é um exemplo do que vamos fazer ...

Então vamos começar ... para fazer a animação vamos precisar de:
1˚ Crie um projeto Flutter.
2° Crie uma "FloatingActionButton", e como "child" defina um "FlutterLogo".

O Widget "FloatingActionButton" possui um parâmetro chamado "heroTag", nele vamos colocar a String "logo".

Para Widgets que não possuem "heroTag", você pode envolve em um Widget "Hero" e definir o parâmetro "tag" como desejar!

3˚ Agora crie uma pagina secundaria, chamarei de "Page2".

Nesta pagina usaremos uma estrutura simples de Scaffold, em seu "body" colocaremos o Widget "FlutterLogo", mas desta vez, vamos envolve-lo em um Widget chamado "Hero".
No widget "Hero", temos o parâmetro "tag", no qual você deve colocar a String "logo", que foi a mesma tag definida na primeira pagina.

4˚ Agora é só definirmos o Navigator na pagina inicial, fazer um reload e ver a magica acontecer.

Bonus

Para ter uma transição mais lenta, pode-se utilizar o seguinte código ...

Abaixo o repositório para estudo mais aprofundado do funcionamento do Hero: Link
Agradeço sua leitura, espero que tenha gostado. 🤩