Flutter Toggle Button won't Toggle Using Bloc - flutter

Question

I have tried moving the flutter toggle from setState to bloc. I cannot get the toggle buttons to toggle.
The BlocEvent:
abstract class ToggleSizeEvent extends Equatable {
const ToggleSizeEvent();
#override
List<Object?> get props => [];
}
class SelectSize extends ToggleSizeEvent {
const SelectSize({
required this.idSelected,
});
final int idSelected;
#override
List<Object?> get props => [idSelected];
}
The State:
enum ToggleSizeStatus { initial, success, error, loading, selected }
extension ToggleSizeStatusX on ToggleSizeStatus {
bool get isInitial => this == ToggleSizeStatus.initial;
bool get isSuccess => this == ToggleSizeStatus.success;
bool get isError => this == ToggleSizeStatus.error;
bool get isLoading => this == ToggleSizeStatus.loading;
bool get isSelected => this == ToggleSizeStatus.selected;
}
class ToggleSizeState extends Equatable {
ToggleSizeState(
{String size = '',
// this.product,
this.status = ToggleSizeStatus.initial,
List<bool>? sizeSelection,
int idSelected = 0,
this.index = 0})
// : sizeSelection = List.generate(product.size!.length, (index) => false),
: idSelected = idSelected,
size = size;
final List<bool> sizeSelection = [false, false, false, false];
// final ProductModel product;
final ToggleSizeStatus status;
final int idSelected;
final String size;
final int index;
#override
List<Object> get props => [status, sizeSelection, idSelected, size];
ToggleSizeState copyWith({
List<bool>? sizeSelection,
ToggleSizeStatus? status,
int? idSelected,
String? size,
int? index,
}) {
return ToggleSizeState(
// product: product,
sizeSelection: sizeSelection ?? this.sizeSelection,
status: status ?? this.status,
idSelected: idSelected ?? this.idSelected,
size: size ?? this.size,
index: index ?? this.index);
}
}
The bloc:
part 'toggle_size_event.dart';
part 'toggle_size_state.dart';
class ToggleSizeBloc extends Bloc<ToggleSizeEvent, ToggleSizeState> {
final ProductModel product;
ToggleSizeBloc({required this.product})
: super(ToggleSizeState(product: product)) {
on<SelectSize>(_mapSelectSizeEventToState);
}
int newIndex = 0;
void _mapSelectSizeEventToState(
SelectSize event, Emitter<ToggleSizeState> emit) async {
for (int index = 0; index < state.sizeSelection.length; index++) {
if (index == newIndex) {
state.sizeSelection[index] = !state.sizeSelection[index];
} else {
state.sizeSelection[index] = false;
}
}
emit(state.copyWith(
status: ToggleSizeStatus.selected,
idSelected: event.idSelected,
sizeSelection: state.sizeSelection));
}
}
For the UI:
class ProductSize extends StatefulWidget {
final ProductModel product;
const ProductSize({super.key, required this.product});
#override
State<ProductSize> createState() => _ProductSizeState();
}
class _ProductSizeState extends State<ProductSize> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
children: [
const Text('Please select size'),
BlocProvider(
create: (context) => ToggleSizeBloc(product: widget.product),
child: BlocBuilder<ToggleSizeBloc, ToggleSizeState>(
builder: (context, state) {
debugPrint('ToggleSize Page ${state.sizeSelection}');
return ToggleButtons(
selectedColor: Colors.white,
color: pureBlack,
fillColor: thistle,
splashColor: lilac,
highlightColor: lilac,
textStyle: const TextStyle(fontWeight: FontWeight.bold),
renderBorder: true,
borderColor: lilac,
borderWidth: 1.5,
borderRadius: BorderRadius.circular(10),
selectedBorderColor: lilac,
isSelected: state.sizeSelection,
onPressed: (int newIndex) {
context.read<ToggleSizeBloc>().add(SelectSize(
idSelected: widget.product.id!,
));
},
children: [
for (var item in widget.product.size!)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text(item, style: const TextStyle(fontSize: 18)),
),
],
);
},
),
),
],
),
);
}
}
Please i have been on this for a while. Any help would be appreciated. I am trying to get the toggle button to toggle on selection. Am i doing the for loop in a wrong way?
class ProductModel {
const ProductModel({
this.name,
this.size,
this.imgsUrl,
this.id,
this.description,
this.owner,
this.price,
});
final String? name;
final String? description;
final String? price;
final int? id;
final String? owner;
final List<String>? imgsUrl;
final List<String>? size;
factory ProductModel.fromJson(Map<String, dynamic> json) => ProductModel(
name: json["name"],
price: json["price"],
imgsUrl: List<String>.from(json["imgs_url"].map((x) => x)),
size: List<String>.from(json["size"].map((x) => x)),
id: json["id"],
description: json["description"],
owner: json["owner"],
);
Map<String, dynamic> toJson() => {
"name": name,
"imgs_url": List<dynamic>.from(imgsUrl!.map((x) => x)),
"size": List<dynamic>.from(size!.map((x) => x)),
"id": id,
"description": description,
"owner": owner,
"price": price,
};
static const empty = ProductModel(
description: '',
price: '',
id: 0,
imgsUrl: [],
owner: '',
name: '',
size: [],
);
}
For the sample data to reproduce the issu:
{
"id": 2,
"name": "Roma",
"owner": "pythonGO",
"price": "450485.99",
"description": "Mixed Colored",
"imgs_url": [
"http://1111.com/product-images/yadrafektxqvrckoymjoqktdhwxpjnulqqymattavpvqdfzsnpsdzcxdbhmurxnfHeels.png"
],
"imgs_name": [
"product-images/yadrafektxqvrckoymjoqktdhwxpjnulqqymattavpvqdfzsnpsdzcxdbhmurxnfHeels.png"
],
"size": [
"45",
"46",
"47",
"48"
],
"is_promoted": {
"Bool": false,
"Valid": true
},
"is_trending": {
"Bool": false,
"Valid": true
},
"is_mens": {
"Bool": false,
"Valid": true
},
"is_womens": {
"Bool": false,
"Valid": true
},
"is_kids": {
"Bool": false,
"Valid": true
},
"created_at": "2022-10-26T08:27:22.600809Z",
}