In my app, I have a tinder style multiple image placeholders which the user can click on to pick image. After the first image has been picked, the next time the user clicks on another placeholder that calls the pickImage method, nothing happens. I can't figure out why. This is the code for picking image that is triggered each time a user presses the add button on each placeholder. The placeholders are placed in a draggable grid view. The buttons are standard flutter FAB buttons.
Future _pickImageFromGallery() async {
final returnedImage =
await ImagePicker().pickImage(source: ImageSource.gallery);
if (returnedImage == null) {
return;
}
setState(() {
_selectedImage = File(returnedImage!.path);
if (!_hasImageCopy) {
context.read<Data>().addToNumberOfImages();
_hasImageCopy = true;
final indexOfThisWidget = context
.read<Data>()
.listOfSIPDetails6
.indexWhere((item) => item.id == widget.id);
context.read<Data>().listOfSIPDetails6[indexOfThisWidget].hasImage =
true;
context.read<Data>().reorderListOfSIPDetails6ForEmptyHolders();
}
final indexOfThisWidget = context
.read<Data>()
.listOfSIPDetails6
.indexWhere((item) => item.id == widget.id);
context.read<Data>().listOfSIPDetails6[indexOfThisWidget].hasImage = true;
});
}
void _fabOnPressed() {
if (_hasImageCopy) {
_resetDisplayImage();
} else {
_pickImageFromGallery();
}
}
Widget build(BuildContext context) {
print('built');
return InkWell(
onTap: () => _pickImageFromGallery(),
child: Stack(
clipBehavior: Clip.none,
children: <Widget>[
Container(
clipBehavior: Clip.hardEdge,
width: widget.width,
height: widget.height,
decoration: const BoxDecoration(
color: Color(0xFFE4E6EC),
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
child: _displayImage(),
),
Positioned(
bottom: -15,
right: -15,
child: SizedBox(
height: 35,
width: 35,
child: FittedBox(
child: FloatingActionButton(
materialTapTargetSize: MaterialTapTargetSize.padded,
heroTag: null,
shape: const CircleBorder(),
onPressed: () => _fabOnPressed(),
backgroundColor: const Color(0xFFB56FB7),
// style: ElevatedButton.styleFrom(
// elevation: 2.5,
// maximumSize: const Size(64, 64),
// shape: const CircleBorder(),
// padding: const EdgeInsets.all(8),
// backgroundColor: const Color(0xFFB56FB7), // <-- Button color
// foregroundColor: Colors.red, // <-- Splash color
// ),
child: Icon(
_hasImageCopy ? Icons.close_rounded : Icons.add_rounded,
color: Colors.white,
size: 38,
),
),
),
),
),
Text('${widget.id}'),
Positioned(
right: 20,
child: Text(
'${context.read<Data>().listOfSIPDetails6.indexWhere((item) => item.id == widget.id)}',
style: const TextStyle(color: Colors.blue),
),
),
Positioned(
left: 20,
bottom: 20,
child: Text(
'${context.read<Data>().numberOfImages}',
style: const TextStyle(color: Colors.blue),
),
),
],
),
);
}
}
I was expecting that as soon as the first image is picked, the user can click on the next placeholder's FAB button to pick another image and nothing happens on press sometimes and sometimes it opens up.