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

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