Update Widget value when modal class value update in Cubit

Question

I'm using Cubit pattern to get data from category API & successfully displayed in grid view.

Now I'm stuck at one point, onclick of one block of grid view I want to update category name. It updated but UI is not updating.

How can I do that or is something missing in code.

Here the code I've written,

BlocConsumer<CubitCategory, StateResponse>(
                    bloc: cubitCategory..funcCubitGetCategories(),
                    listener: (context, state) {},
                    builder: (context, state) {

                      if (state is StateResponseInitial) {
                        return Text("Loading....",style: TextStyle(color: Colors.yellow),);
                      }
                      else if (state is StateResponseLoading) {                        
                        return Text("Loading....",style: TextStyle(color: Colors.yellow),);
                      }
                      else if (state is StateResponseEmpty) {
                        return Text("Empty State....");
                      }
                      else if (state is StateResponseNoInternet) {
                        return Text("No Internet....");
                      } 
                      else if (state is StateResponseError) {
                        return Text("Error....");
                      } 
                      else if (state is StateResponseSuccess) {

                        if (state.data != null) {

                         ModelCategory modelCategory =  state.data as ModelCategory;

                          return  GridView.builder(
                            padding: const EdgeInsets.all(15),
                            shrinkWrap: true,
                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 2,
                                mainAxisSpacing: 15,
                                crossAxisSpacing: 15
                            ),
                            itemCount: modelCategory.allCategories!.length,
                            itemBuilder: (_, index) => //FlutterLogo(),
                                    InkWell(
                                      onTap: (){
                                        modelCategory.allCategories![index].categoryName = "XYz";
                                      },
                                      child: Container(
                                        decoration: BoxDecoration(
                                          color: Colors.black.withOpacity(.20)
                                        ),
                                        child: Column(
                                          children: [
                                            Text("${modelCategory.allCategories![index].categoryId}"),
                                            Text("${modelCategory.allCategories![index].categoryName}"),
                                          ],
                                        ),
                                      ),
                                    ),

                          );
                        }
                        else {
                          Text("Null");
                        }
                      }
                      return const SizedBox();

                    }
                ),

I've tried to update UI through this line but not working,

modelCategory.allCategories![index].categoryName = "XYz";

I'm beginner on Cubit

Answer 1

You need to update the state of the Cubit to see the value in the UI updated appropriately.

You can add a emitCategoryName function to the Cubit like so:

class CubitCategory extends Cubit<StateResponse>{
  //...your other functions.

  void editCategoryName(int index, String value){
    if(state is! StateResponseSuccess){
      return;
    }
    final data = (state as StateResponseSuccess).data;
    data[index].categoryName = value;
    emit(StateResponseSuccess(data));
  }
}

Then simply use it in your UI like so:

 onTap: (){
   cubitCategory.editCategoryName(index, 'XYz');
 }