1
resposta

Como colocar um show Dialog com bloc?

No projeto anterior tinhamos uma tela de Dialog que exibia o erro ou a confirmação, mensagem de sucesso, etc..

eu não entendi como usaria isso usando os eventos/estados do bloc, pois estoura o set state enquanto a tela esta sendo buildada! alguém pode me ajudar/dar um norte de como usar a antiga mensagem de sucesso em vez de simplesmente voltar a página com pop.

1 resposta

Olá, Giuseppe! Tudo bem?

Primeiramente quero te pedir desculpas pela demora em dar um retorno.

A forma como implementei isso foi utilizando o BlocListener dentro do TransactionFormContainer, assim, eu faço duas condições: uma para quando o estado é SentState e outra FatalErrorTransactionFormState, quando é enviada a transação eu apresento o dialog de sucesso e quando tenho um erro fatal apresento o dialog de erro.

Abaixo, o bloco com o Listener:

BlocListener<TransactionFormCubit, TransactionFormState>(
    listener: (context, state) {
      if (state is SentState) {
        _showSuccessfullMessage(context);
      }
      if (state is FatalErrorTransactionFormState) {
        _showFailureMessage(context, state.message);
      }
    },
    child: TransactionForm(_contact),
  ),

Agora, o TransactionFormContainer completo:

class TransactionFormContainer extends BlocContainer {
  final Contact _contact;
  const TransactionFormContainer(this._contact, {super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider<TransactionFormCubit>(
      create: (buildContext) {
        return TransactionFormCubit();
      },
      child: BlocListener<TransactionFormCubit, TransactionFormState>(
        listener: (context, state) {
          if (state is SentState) {
            _showSuccessfullMessage(context);
          }
          if (state is FatalErrorTransactionFormState) {
            _showFailureMessage(context, state.message);
          }
        },
        child: TransactionForm(_contact),
      ),
    );
  }
}

Além disso, dentro do nosso response_dialog.dart, adicionei mais uma instrução de navigator.pop(context), para que ao apertar o botão de "ok", voltasse para a tela com a lista de contatos:

onPressed: () {
    Navigator.pop(context);
    Navigator.pop(context);
  },

Essa é apenas uma forma de fazer isso, devem existir outras formas, talvez mais complexas ou elegantes, mas você pode tentar esta, para começar.

Espero que isso te ajude de alguma forma, bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado. ✓

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software