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
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');
}