fix: `BlocConsumer.listener` is not being fired

[feinstein]

When my UI first loads and 2 different states have been emitted, the listener callback is not being fired. If I add a Future.delayed between the emissions, it fires correctly though.

Please see the example code (you need to add freezed and run the build_runner):

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'main.freezed.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final bloc = MyCubit();
  bool hasCalledListener = false;

  @override
  void initState() {
    super.initState();
    bloc.load();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: BlocConsumer<MyCubit, MyState>(
          bloc: bloc,
          builder: (context, state) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  '$state',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
                Text(
                  '$hasCalledListener',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ],
            );
          },
          listener: (context, state) {
            // This is not being called, even though the state changed from "loading" to "success".
            setState(() {
              hasCalledListener = true;
            });
          },
        ),
      ),
    );
  }
}

class MyCubit extends Cubit<MyState> {
  MyCubit() : super(const MyState.loading());

  Future<void> load() async {
    emit(const MyState.loading());
    // uncomment this line to make it work:
    // await Future.delayed(const Duration(seconds: 1), (){});
    emit(const MyState.success());
  }
}

@freezed
sealed class MyState with _$MyState {
  const factory MyState.loading() = MyStateLoading;

  const factory MyState.success() = MyStateSuccess;
}

[felangel]

Hi @feinstein 👋 Thanks for opening an issue!

This is happening because the BlocConsumer's listener only fires for state changes after the listener is mounted. In this case, you are calling bloc.load in initState before the BlocConsumer has mounted and the state change happens before listener starts listening. Hope that helps!

[feinstein]

Hi @felangel thank you for the clarification. I think this should be added into the docs then.

I am adapting Google's recommended Android App Architecture, using bloc at the UI layer. My cubit acts as a View Model, making the decisions for the UI. Once the decision to navigate is made, the cubit emits a new state with a flag, so my View, in Flutter, can navigate (using a listener).

In this code, I want to navigate as soon as I get the result on load, but I understand now this won't be possible using bloc, unless I do some hacks :/.

Do you think it's worthy to make the listener fire, after it was mounted, if the state is different then the cubit's initial state? I imagine this might add some extra complexity, but at the same time it will match the docs and make this edge case work.

[felangel]

Hi @felangel thank you for the clarification. I think this should be added into the docs then.

I am adapting Google's recommended Android App Architecture, using bloc at the UI layer. My cubit acts as a View Model, making the decisions for the UI. Once the decision to navigate is made, the cubit emits a new state with a flag, so my View, in Flutter, can navigate (using a listener).

In this code, I want to navigate as soon as I get the result on load, but I understand now this won't be possible using bloc, unless I do some hacks :/.

Do you think it's worthy to make the listener fire, after it was mounted, if the state is different then the cubit's initial state? I imagine this might add some extra complexity, but at the same time it will match the docs and make this edge case work.

I highly recommend checking out something like package:flow_builder if you want to do navigation based on state changes. You can also just the Navigator 2.0 pages API directly if you prefer not to introduce an additional dependency. I'd prefer not to change the behavior since it would be a potentially very disruptive breaking change and the issue you're facing can be resolved using a declarative navigation solution. Hope that helps!

[feinstein]

I am using navigation 2.0 with the go_router already, I will explore more your suggestion, thanks.

[felangel]

I am using navigation 2.0 with the go_router already, I will explore more your suggestion, thanks.

Sounds good! You can refer to the Firebase Login Example for a reference.