Bloc event triggered only once

Question

I followed this approach to manage blocs and save some line of codes.

I want to fetch data from my API. I would like to do it via initState method and call myBloc.add(MyEvent()). But the problem is, it was only called once.

I've googled around and tried some solution on several blogs and it's official Github repo issues but still doesn't work. I found a similar question but since I'm not using any dependency injection or singleton, I couldn't find what exactly and where the problem is and my problem is still not fixed.

Here is what i've tried so far and still not solving the problem:

Removing Equatable from the bloc
Hard reload the device
Run flutter clean command
Re run the app

To make it clear please have a look at this recording.

And lastly, here is how my script looks like:

leave_bloc.dart

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:flutter_prismahr/app/data/models/leave_model.dart';
import 'package:flutter_prismahr/app/data/repositories/leave_repository.dart';
import 'package:meta/meta.dart';

part 'leave_event.dart';
part 'leave_state.dart';

class LeaveBloc extends Bloc {
  LeaveBloc() : super(LeaveInitial());

  final LeaveRepository repository = LeaveRepository();

  @override
  Stream mapEventToState(
    LeaveEvent event,
  ) async* {
    print('TRIGGERED EVENT IS: $event');
    if (event is LeaveScreenInitialized) {
      yield LeaveLoading();

      try {
        final response = await repository.fetch();
        if (response is List && response.isNotEmpty) {
          yield LeaveLoaded(data: response);
        } else {
          yield LeaveEmpty();
        }
      } catch (e) {
        yield LeaveFailure(error: e.toString());
      }
    }

    if (event is LeaveAdded) {
      yield LeaveCreated(data: event.data);
    }
  }
}

leave_event.dart

part of 'leave_bloc.dart';

abstract class LeaveEvent {
  const LeaveEvent();

  // @override
  // List

Yura · Accepted Answer

TL;DR

Do not use BlocProvider(create: (context) => _yourBloc) on route-level bloc access.

Use BlocProvider.value(value: _leaveBloc, child: LeaveScreen()) instead.

Do not close the bloc inside UI's dispose method.

With help from @Rolly, We've managed to solve the main cause of this issue. It happened because in this case, I'm using route level bloc access provider and closing the bloc from dispose method on the UI. As it was an issue from a long time ago, I'm not sure I remember everything. But I'll try to explain as make sense and as I remember as I can.

MAIN CAUSE

Think about the bloc as a door. I tell my app to get in to leaveBloc on LeaveScreen when user accessed it, do a mess, and give them what they need. First time it being accessed, it works because it was open, the app knows what to do until the user pressed back button and my script closes it.

When the user is going back to that page, the bloc was closed, the app tries to knock the door but it won't open, so it doesn't know what to do but standing there waiting for the door to be opened.

SOLUTION

Because we are using route-level bloc access, the app should not close any of the blocs inside the UI level. Instead, create a dispose function on the route file and trigger it near the top of your widget tree. Like so:

router.dart

class Router {
  final LeaveBloc _leaveBloc = LeaveBloc(
    ...
  );

  Route generateRoute(RouteSettings settings) {
    case Routes.LEAVE:
        return MaterialPageRoute(
            builder: (_) =>
                BlocProvider.value(value: _leaveBloc, child: LeaveScreen()));
  }

  void dispose() {
    _leaveBloc.close();
    // another bloc
    // another bloc
  }
}

main.dart

void main() async {
  ...

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final Router _router = Router();
  ...


  @override
  void dispose() {
    _router.dispose(); // <-- trigger dispose when the user closes the app
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
    );
  }
}

ADDITIONAL NOTE

Notice that I'm changing the route script from this:

    case Routes.LEAVE:
        return MaterialPageRoute(
          builder: (_) => MultiBlocProvider(
            providers: [
              BlocProvider(create: (context) => _leaveBloc),
              BlocProvider(create: (context) => _leaveUpdateBloc),
              BlocProvider(create: (context) => _leaveCreateBloc),
            ],
            child: LeaveScreen(),
          ),
        );

To this:

    case Routes.LEAVE:
        return MaterialPageRoute(
            builder: (_) =>
                BlocProvider.value(value: _leaveBloc, child: LeaveScreen()));

It was necessary because we need to tell the app that we don't want to close the blocs from the UI level and let the router's dispose method do the job. It was officially explained in the bloc library's documentation in this line.

We're using BlocProvider.value when providing the CounterBloc instance to the routes because we don't want the BlocProvider to handle disposing the bloc (since _AppState is responsible for that).

Reference: bloc library's official documentation (Bloc Access - Named Route Access)

Bloc event triggered only once

Answers (2)

Related Questions