FormBuilderField not showing the right value (Flutter) - flutter

Question

I created an Item form where you can input title, description,etc...
When selecting the ngo and submitting the entire form, I don't get what I selected.
And when integrating the validator from the FormBuilderField nothing happens, and the item don't get uploaded.
Any idea how I can fix it?
Thank you in advance for your answers!
Here the code:
class NgoSelectorState extends State<NgoSelector> with TickerProviderStateMixin {
String selectedNgo = "Select a charity".tr();
FormFieldState<List<MapEntry<int, NgoDetails>>>? theField;
AnimationController? _controller;
AnimationController? _sizeController;
Animation? _colorAnimation;
bool isSelected = false;
String selectedName = "";
#override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 100));
_sizeController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 100),
value: 1.0,
lowerBound: 1.0,
upperBound: 1.1,
);
_colorAnimation =
ColorTween(begin: Colors.transparent, end: MyTheme.primary).animate(_controller!);
_controller!.addListener(() {});
_controller!.addStatusListener((status) {
if (status == AnimationStatus.completed) {
setState(() {
isSelected = true;
});
} else if (status == AnimationStatus.dismissed) {
setState(() {
isSelected = false;
});
}
});
}
#override
void dispose() {
super.dispose();
_controller!.dispose();
_sizeController!.dispose();
}
#override
Widget build(BuildContext context) {
return BlocBuilder<NgosBloc, NgosState>(builder: ((context, state) {
if (state is NgosLoadingState) {
return const MyCircularProgressIndicator();
}
if (state is NgosLoadedState) {
List<MapEntry<int, NgoDetails>>? ngosList = List.from(state.ngos.entries);
return FormBuilderField(
name: 'ngoId',
decoration: const InputDecoration(
enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: MyTheme.primary)),
border: OutlineInputBorder(),
filled: true,
fillColor: Color(0xAFBFDCFF),
hintText: "Please select your NGO",
),
builder: (FormFieldState<List<MapEntry<int, NgoDetails>>> field) {
theField = field;
return SizedBox(
height: 300,
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.symmetric(),
physics: const AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: ngosList.length,
itemBuilder: (BuildContext context, int index) {
String ngoName = ngosList[index].value.name;
String ngoLogo = ngosList[index].value.logo;
return AnimatedBuilder(
animation: _controller!,
builder: (BuildContext context, _) {
return Padding(
padding: const EdgeInsets.fromLTRB(10, 17, 10, 17),
child: GestureDetector(
key: Key('$index'),
onTap: () {
if (isSelected) {
_controller!.reverse();
_sizeController!.reverse().then(
(value) {
selectedName = ngoName;
_controller!.forward();
_sizeController!.forward();
return null;
},
);
} else {
selectedName = ngoName;
_controller!.forward();
_sizeController!.forward();
}
},
child: selectedName == ngoName
? ScaleTransition(
scale: _sizeController!,
child: Container(
width: 200,
decoration: BoxDecoration(
color: _colorAnimation!.value,
borderRadius:
const BorderRadius.all(Radius.circular(10))),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(8),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 10,
),
Expanded(
child: CachedNetworkImage(
imageUrl: '${ngoLogo}_SMALL.jpg',
placeholder: (context, url) =>
const CircularProgressIndicator(),
errorWidget: (context, url, error) =>
const Icon(Icons.error),
width: 120,
height: 100,
//fit: BoxFit.scaleDown,
),
),
const SizedBox(
height: 15,
),
Expanded(
child: Text(
ngoName,
style: const TextStyle(
color: Color(0xff003087),
fontSize: 16,
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.center,
maxLines: 7,
),
),
],
),
),
),
))
: Container(
width: 200,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 10,
),
Expanded(
child: CachedNetworkImage(
imageUrl: '${ngoLogo}_SMALL.jpg',
placeholder: (context, url) =>
const CircularProgressIndicator(),
errorWidget: (context, url, error) =>
const Icon(Icons.error),
//fit: BoxFit.scaleDown,
width: 120,
height: 100,
),
),
const SizedBox(
height: 15,
),
Expanded(
child: Text(
ngoName,
style: const TextStyle(
color: Color(0xff003087),
fontSize: 16,
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.center,
overflow: TextOverflow.clip,
maxLines: 7,
),
)
],
),
),
),
);
});
},
),
);
},
/* validator: FormBuilderValidators.compose([
FormBuilderValidators.required(errorText: "Please select your NGO".tr()),
]), */
);
}
if (state is NgosErrorState) {
return Center(child: Text(state.error.toString()));
}
return Container();
}));
}
}