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