Flutter: Unhandled Exception: Bad state: Cannot add new events after calling close (NOT SAME CASE)

Question

I am trying to use the BLoC pattern to manage data from an API and show them in my widget. I am able to fetch data from API and process it and show it, but I am using a bottom navigation bar and when I change tab and go to my previous tab, it returns this error:

Unhandled Exception: Bad state: Cannot add new events after calling close.

I know it is because I am closing the stream and then trying to add to it, but I do not know how to fix it because not disposing of the publish subject will result in a memory leak.

I know maybe this question is almost the same as this question.

But I have implemented it and it doesn't work in my case, so I make questions with a different code and hope someone can help me in solving my case. I hope you understand, Thanks.

Here is my BLoC code:

import '../resources/repository.dart';
import 'package:rxdart/rxdart.dart';
import '../models/meals_list.dart';

class MealsBloc {
  final _repository = Repository();
  final _mealsFetcher = PublishSubject<MealsList>();

  Observable<MealsList> get allMeals => _mealsFetcher.stream;

  fetchAllMeals(String mealsType) async {
    MealsList mealsList = await _repository.fetchAllMeals(mealsType);
    _mealsFetcher.sink.add(mealsList);
  }

  dispose() {
    _mealsFetcher.close();
  }
}

final bloc = MealsBloc();

Here is my UI code:

import 'package:flutter/material.dart';
import '../models/meals_list.dart';
import '../blocs/meals_list_bloc.dart';
import '../hero/hero_animation.dart';
import 'package:dicoding_submission/src/app.dart';
import 'detail_screen.dart';


class DesertScreen extends StatefulWidget {
  @override
  DesertState createState() => new DesertState();
}

class DesertState extends State<DesertScreen> {

  @override
  void initState() {
    super.initState();
    bloc.fetchAllMeals('Dessert');
  }

  @override
  void dispose() {
    bloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: getListDesert()
    );
  }

  getListDesert() {
    return Container(
      color: Color.fromRGBO(58, 66, 86, 1.0),
      child: Center(
        child: StreamBuilder(
          stream: bloc.allMeals,
          builder: (context, AsyncSnapshot<MealsList> snapshot) {
            if (snapshot.hasData) {
              return _showListDessert(snapshot);
            } else if (snapshot.hasError) {
              return Text(snapshot.error.toString());
            }
            return Center(child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white)
            ));
          },
        ),
      ),
    );
  }

  Widget _showListDessert(AsyncSnapshot<MealsList> snapshot) => GridView.builder(
    itemCount: snapshot == null ? 0 : snapshot.data.meals.length,
    gridDelegate:
    SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    itemBuilder: (BuildContext context, int index) {
      return GestureDetector(
        child: Card(
          elevation: 2.0,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(5))),
          margin: EdgeInsets.all(10),
          child: GridTile(
            child: PhotoHero(
              tag: snapshot.data.meals[index].strMeal,
              onTap: () {
                showSnackBar(context, snapshot.data.meals[index].strMeal);
                Navigator.push(
                    context,
                    PageRouteBuilder(
                      transitionDuration: Duration(milliseconds: 777),
                      pageBuilder: (BuildContext context, Animation<double> animation,
                          Animation<double> secondaryAnimation) =>
                          DetailScreen(
                              idMeal: snapshot.data.meals[index].idMeal),
                    ));
              },
              photo: snapshot.data.meals[index].strMealThumb,
            ),
            footer: Container(
              color: Colors.white70,
              padding: EdgeInsets.all(5.0),
              child: Text(
                snapshot.data.meals[index].strMeal,
                textAlign: TextAlign.center,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    fontWeight: FontWeight.bold, color: Colors.deepOrange),
              ),
            ),
          ),
        ),
      );
    },
  );

}

If you need the full source code, this is the repo with branch submission-3

score 1 · Answer 1 · answered Jun 15 '19 at 17:48

1

bloc.dispose(); is the problem.

Since the bloc is initialised outside your UI code, there is no need to dispose them.

answered Jun 15 '19 at 17:48

Willy

859
8
17

But if I don't implement bloc.dispose(); it will cause a memory leak. This is my ref for using BLoC : https://medium.com/flutterpub/architect-your-flutter-project-using-bloc-pattern-part-2-d8dd1eca9ba5 – R Rifa Fauzi Komara Jun 15 '19 at 18:05
Because he only uses single page, while you have multiple (bottomNavBar). One solution is to put the bloc dispose on the parent widget above the pages. – Willy Jun 15 '19 at 18:11
Can u write the code for ur solution? Because I confused for the implemented. Sorry – R Rifa Fauzi Komara Jun 18 '19 at 07:11

Julio Henrique Bitencourt · Answer 2 · 2019-06-15T18:14:21.537

Why are you instantiating your bloc on the bloc class?

You must add your bloc instance somewhere in your widget tree, making use of a InheritedWidget with some Provider logic. Then in your widgets down the tree you would take that instance and access its streams. That is why this whole process it is called 'lifting up the state'.

That way, your bloc will always be alive when you need it, and the dispose would still be called sometime.

A bloc provider for example:

import 'package:flutter/material.dart';
abstract class BlocBase {
  void dispose();
}

class BlocProvider<T extends BlocBase> extends StatefulWidget {
  BlocProvider({
    Key key,
    @required this.child,
    @required this.bloc,
  }) : super(key: key);

  final T bloc;
  final Widget child;

  @override
  State<StatefulWidget> createState() => _BlocProviderState<T>();

  static T of<T extends BlocBase>(BuildContext context) {
    final type = _typeOf<_BlocProviderInherited<T>>();
    _BlocProviderInherited<T> provider = context
        .ancestorInheritedElementForWidgetOfExactType(type)
        ?.widget;
    return provider?.bloc;
  }

  static Type _typeOf<T>() => T;
}

class _BlocProviderState<T extends BlocBase> extends State<BlocProvider<T>> {
  @override
  Widget build(BuildContext context) {
    return new _BlocProviderInherited(
      child: widget.child,
      bloc: widget.bloc
    );
  }

  @override
  void dispose() {
    widget.bloc?.dispose();
    super.dispose();
  }
}

class _BlocProviderInherited<T> extends InheritedWidget {
  _BlocProviderInherited({
    Key key,
    @required Widget child,
    @required this.bloc
  }) : super(key: key, child: child);

  final T bloc;

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => false;
}

It makes use of a combination of InheritedWidget (to be available easily down the widget tree) and StatefulWidget (so it can be disposable).

Now you must add the provider of some bloc somewhere into your widget tree, that is up to you, I personally like to add it between the routes of my screens.

In the rout of my MaterialApp widget:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      onGenerateRoute: _routes,
    );
  }

  Route _routes(RouteSettings settings) {
    if (settings.isInitialRoute)
      return MaterialPageRoute(
          builder: (context) {
            final mealsbloc = MealsBloc();
            mealsbloc.fetchAllMeals('Dessert');

            final homePage = DesertScreen();
            return BlocProvider<DesertScreen>(
              bloc: mealsbloc,
              child: homePage,
            );
          }
      );
  }
}

With the help of routes, the bloc was created 'above' our homePage. Here I can call wherever initialization methods on the bloc I want, like .fetchAllMeals('Dessert'), without the need to use a StatefulWidget and call it on initState.

Now obviously for this to work your blocs must implements the BlocBase class

class MealsBloc implements BlocBase {
  final _repository = Repository();
  final _mealsFetcher = PublishSubject<MealsList>();

  Observable<MealsList> get allMeals => _mealsFetcher.stream;

  fetchAllMeals(String mealsType) async {
    MealsList mealsList = await _repository.fetchAllMeals(mealsType);
    _mealsFetcher.sink.add(mealsList);
  }

  @override
  dispose() {
    _mealsFetcher.close();
  }
}

Notice the override on dispose(), from now on, your blocs will dispose themselves, just make sure to close everything on this method.

A simple project with this approach here.

To end this, on the build method of your DesertScreen widget, get the available instance of the bloc like this:

var bloc = BlocProvider.of<MealsBloc>(context);

A simple project using this approach here.

Thanks for giving me a solution, but I confused about implementing it. Because I new in Flutter and implementation BLoC Pattern. Can u re-write ur solution with my code? — R Rifa Fauzi Komara, Jun 18 '19 at 07:13

score -2 · Accepted Answer · answered Jun 21 '19 at 03:26

-2

For answers that resolve my problem, you can follow the following link: This

I hope you enjoy it!!

answered Jun 21 '19 at 03:26

R Rifa Fauzi Komara

1,915
6
27
54

Flutter: Unhandled Exception: Bad state: Cannot add new events after calling close (NOT SAME CASE)

3 Answers3