Checking bloc state with blocbuilder

Question

I'm fetching a list of items from an API and building them using the BlocBuilder. It works and the widget list is built but when I print out to check which part of the state is being executed, I get as shown below. Why does 'Nothing' appeared ?

ProductInitial
fetching product //from bloc when fetching api
Nothing
fetching complete //from bloc after fetching api
ProductSuccess

Main

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
        providers: [
          BlocProvider<ProductBloc>(
            create: (BuildContext context) => ProductBloc()..add(FetchProduct())
          ),
        ],
        child: MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MainScreen(),
        )
      );
  }
}

List Screen

Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: BlocBuilder<ProductBloc, ProductState>(
          builder: (context, state) {
            if(state is ProductInitial){
              print('ProductInitial');
              return buildLoadingWidget();
            }
            if(state is ProductSuccess){
              print('ProductSuccess');
              return _buildProductListWidget(state.products);
            }
            if(state is ProductFailed){
              print('ProductFailed');
              return Center(
                child: Text('Something went wrong'),
              );
            }
            print('Nothing');
            return buildLoadingWidget();
          }
        )
      )
    );
  }

Update

Added the bloc code for reference.

Bloc

class ProductBloc extends Bloc<ProductEvent, ProductState> {
  ProductBloc() : super(ProductInitial());

  ProductRepository _repository = ProductRepository();

  @override
  Stream<ProductState> mapEventToState(ProductEvent event,) async* {
    
    if(event is FetchProduct){
      yield ProductLoading();
      try{
        print('fetching product');
        final List<ProductModel> products = await _repository.getProducts();
        yield ProductSuccess(products);
        print('fetching complete');
      }catch(e){
        yield ProductFailed();
        print(e);
        print('fetching failed');
      }
    }

  }
}

Answer 1

Update your bloc with the below code:

BLOC

class ProductBloc extends Bloc<ProductEvent, ProductState> {
ProductBloc() : super(ProductInitial());
   
 ProductRepository _repository = ProductRepository();

  @override
  Stream<ProductState> mapEventToState(ProductEvent event,) async* {
    
    if(event is FetchProduct){
      yield ProductInitial();
      try{
        print('fetching product');
        final List<ProductModel> products = await _repository.getProducts();
        yield ProductSuccess(products);
        print('fetching complete');
      }catch(e){
        yield ProductFailed();
        print(e);
        print('fetching failed');
      }
    }
  }
}

As in your code, you are yield ProductLoading state but didn't handle that state in your BlocBuilder that's why it bypasses all if statement and prints Nothing.

So another way is handle ProductLoading in your block build as shown below

List Screen

  Widget build(BuildContext context) {
        return Container(
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: BlocBuilder<ProductBloc, ProductState>(
              builder: (context, state) {
                if(state is ProductInitial){
                  print('ProductInitial');
                  return buildLoadingWidget();
                }
                if(state is ProductLoading){
                  print('ProductLoading');
                  return buildLoadingWidget();
                }
                if(state is ProductSuccess){
                  print('ProductSuccess');
                  return _buildProductListWidget(state.products);
                }
                if(state is ProductFailed){
                  print('ProductFailed');
                  return Center(
                    child: Text('Something went wrong'),
                  );
                }
                print('Nothing');
                return buildLoadingWidget();
              }
            )
          )
        );
      }