BlocListener does not build widget on state change

Question

I'm trying to display a text based on the state of a bloc so I decided to use BlocListener as I think that's the main purpose of of the widget. I want to display a text when the state is AuthFailed.

BlocListener

BlocListener<AuthBloc, AuthState>(
  listener: (context, state) {
    if (state is AuthFailed)
      return Text(
        'Oops, Invalid Credentials.',
        style: TextStyle(color: Colors.red),
      );
  },
  child: Container(),
),

The problem is, the text doesnt appear when the state is AuthFailed but If I use a BlocBuilder instead, it works.

BlocBuilder

BlocBuilder<AuthBloc, AuthState>(
  builder: (context, state) {
    if (state is AuthFailed)
      return Text(
        'Oops, Invalid Credentials.',
        style: TextStyle(color: Colors.red),
      );
    return Container(
      width: 0,
      height: 0,
    );
  },
),

Robert Sandberg · Answer 1 · 2021-02-21T07:59:47.413

You should use the BlocBuilder for that task. The purpose of the builder is to return a widget based on state.

The BlocListener is used for tasks such as routing or showing snackbar etc based on states. When you want to do something based on state.

The documentation is excellent, check it out:

https://pub.dev/packages/flutter_bloc

Furthermore, the listener function is a void function, so when you return the text widget, it is discarded. It you have linting on you would probably get a warning.

BlocListener does not build widget on state change

1 Answers1