Why does image picker in stateless widget with bloc causes late initialization error? - flutter

Question

While using ImagePicker https://pub.dev/packages/image_picker, picking the image works.
But when I put this into the sink it crashes with the following error:
LateInitializationError: Field '_textSeparators#411091221' has already been initialized.
When I remove the FormBuilder it works. So maybe has to do something with the FormBuilder.
Would be great if anyone can point me into the right direction here.
Widget:
class CreatePost extends StatelessWidget {
final GlobalKey<FormBuilderState> _formkey =
GlobalKey<FormBuilderState>(debugLabel: 'GlobalFormKey #SignIn ');
const CreatePost({required Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return BlocBuilder<PostBloc, PostState>(
builder: (context, state) {
if (state is AddImagePost) {
return Scaffold(
appBar: AppBar(
iconTheme: const IconThemeData(color: Colors.black,),
),
body: GestureDetector(
onTap: () {
ImagePicker().pickImage(
source: ImageSource.gallery,)
.then((im) =>context.read<PostBloc().add(SetImagePost(im!)));
},
child:
Column(
children: [
FormBuilder(key: _formkey, "content")
_imageWidget(state.memoryImage),
)],
),);
}
},
);
}
}
Event:
class SetImagePost extends PostEvent {
const SetImagePost(this.image);
final XFile image;
}
State:
class AddImagePost extends PostState {
final MemoryImage memoryImage;
AddImagePost(this.image) : super();
}
BloC:
class PostBloc extends Bloc<PostEvent, PostState> {
final XFile image;
PostBloc({required this.image})
:super(CreatePostInit()){
on<SetImagePost>(_setImagePost);
}
void _setImagePost(SetImagePost event, Emitter<PostState> emit) async {
var memoryImage await apiRepository.postImage(event.image);
emit(AddImagePost(memoryImage));
}
}
Adding the different widgets to the FormBuilder step by step, it turned out that exactly the following widget is causing the error:
TextFieldTags(
textfieldTagsController: tagsControllerAnswers,
initialTags: const ["yes","no","maybe"],
textSeparators: const [' ', ','],
letterCase: LetterCase.small,
validator: (String tag) {
if (tagsController.getTags!.contains(tag)) {
return 'you already entered that';
}
if(tagsControllerAnswers.getTags!.length > 4){
return 'Please enter no more than 5 tags.';
}
return null;
},
inputfieldBuilder:
(context, tec, fn, error, onChanged, onSubmitted) {
return ((context, sc, tags, onTagDelete) {
return TextField(
controller: tec,
focusNode: fn,
decoration: InputDecoration(
isDense: true,
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: askTextFieldBorderFocused, width: 3.0),
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: askTextFieldBorder, width: 2.0),
),
errorText: error,
prefixIconConstraints:
BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.74),
prefixIcon: tags.isNotEmpty
? SingleChildScrollView(
controller: sc,
scrollDirection: Axis.horizontal,
child: Row(
children: tags.map((String tag) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(3.0),
),
color: tagColor,
),
margin: const EdgeInsets.symmetric(
horizontal: 5.0),
padding: const EdgeInsets.symmetric(
horizontal: 5.0, vertical: 5.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
InkWell(
child: Text(
tag,
style: CustomTextStyle.bodyText1(context)?.copyWith(color: tagFont ),
),
onTap: () {
// print("$tag selected");
},
),
const SizedBox(width: 3.0),
InkWell(
child: const Icon(
Icons.close_rounded,
size: 20.0,
color: tagFont,
),
onTap: () {
onTagDelete(tag);
},
)
],
),
);
}).toList()),
)
: null,
),
onChanged: onChanged,
onSubmitted: onSubmitted,
);
});
},
),

Answer 1

Moving the "TextFieldTags" out of the FormBuilder solved the issue :)