Flutter : How to select image from a list - flutter

Question

I'm stuck on a small point, I'm developing a self-help service application and I take care of creating the form to create an announcement.
For that I thought it a great idea to set it up as a Cupertino Stepper, but when I want the user to choose an image from a list I give, I don't know how to make an image selectable. Here is a picture of what I have so far (left) and what I would like (right):
Comparison between what I have and what I want
And here is the code of the page I have:
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Stepper(
currentStep: currentStep,
onStepTapped: (index) {
setState(() => currentStep = index);
},
onStepContinue: () {
if (currentStep != 3) {
setState (() => currentStep++);
}
},
onStepCancel: () {
if (currentStep != 0) {
setState (() => currentStep--);
}
},
steps: [
Step(
isActive: currentStep >= 0,
title: Text('Choisissez une catégorie'),
content: CupertinoPageScaffold(
child: DefaultTextStyle(
style: TextStyle(
color: CupertinoColors.label.resolveFrom(context),
fontSize: 22.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('Catégorie séléctionnée : ', style: TextStyle(fontSize: 14),),
CupertinoButton(
padding: EdgeInsets.zero,
// Display a CupertinoPicker with list of fruits.
onPressed: () => _showDialog(
CupertinoPicker(
magnification: 1.22,
squeeze: 1.2,
useMagnifier: true,
itemExtent: _kItemExtent,
onSelectedItemChanged: (int selectedItem) {
setState(() {
_selectedCategorie = selectedItem;
});
},
children:
List<Widget>.generate(_CategorieNames.length, (int index) {
return Center(
child: Text(
_CategorieNames[index],
),
);
}),
),
),
// This displays the selected fruit name.
child: Text(
_CategorieNames[_selectedCategorie],
),
),
],
),
),
)
),
Step(
isActive: currentStep >= 1,
title: Text("Choisir le titre de l'annonce"),
content: Padding(
padding: EdgeInsets.only(top: 20),
child: TextField(
maxLength: 20,
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(30)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 1.5),
borderRadius: BorderRadius.circular(30)
),
labelText: "Titre de l'annonce"
),
),
)
),
Step(
isActive: currentStep >= 2,
title: Text('Ajouter une description'),
content: Padding(
padding: EdgeInsets.only(top: 20),
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
maxLength: 250,
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(30)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 1.5),
borderRadius: BorderRadius.circular(30)
),
labelText: "Description de l'annonce"
),
),
)
),
Step(
isActive: currentStep >= 3,
title: Text('Ajouter une image'),
content: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child:
Image.asset("images/Jardinage.png"),
),
Expanded(
child:
Image.asset("images/baby sitting.png"),
),
Expanded(
child:
Image.asset("images/Coiffure.png"),
),
],
),
),
],
)
],
),
),
);
I thank you in advance for your help !

Answer 1

You can make the image selectable by adding GestureDetector and changing the _selectedImageIndex using setState on each tap.
Step(
isActive: currentStep >= 3,
title: const Text('Ajouter une image'),
content: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
_selectedImage = 0;
});
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: _selectedImage == 0
? Colors.green
: Colors.transparent)),
child: Image.asset(
"assets/images/provinces/1.png"))),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
_selectedImage = 1;
});
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: _selectedImage == 1
? Colors.green
: Colors.transparent)),
child: Image.asset(
"assets/images/provinces/2.png"))),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
_selectedImage = 2;
});
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: _selectedImage == 2
? Colors.green
: Colors.transparent)),
child: Image.asset(
"assets/images/provinces/3.png"))),
),
],
),
),
Alternate Solution : You can refactor the image selector widget as well
The variables will be
var _selectedImageIndex = 0;
final _images = [
"assets/images/provinces/1.png",
"assets/images/provinces/2.png",
"assets/images/provinces/3.png",
];
SelectabImage widget will be
class SelectableImage extends StatelessWidget {
const SelectableImage({
Key? key,
required this.isSelected,
required this.imageAsset,
required this.onTap,
}) : super(key: key);
final bool isSelected;
final String imageAsset;
final void Function(String imageAsset) onTap;
#override
Widget build(BuildContext context) {
return Expanded(
child: GestureDetector(
onTap: () => onTap(imageAsset),
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: isSelected ? Colors.green : Colors.transparent)),
child: Image.asset(imageAsset),
),
),
);
}
}
Step function will be reduced to
Step(
isActive: currentStep >= 3,
title: const Text('Ajouter une image'),
content: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
for (int i = 0; i < _images.length; i++)
SelectableImage(
isSelected: _selectedImageIndex == i,
onTap: (selectedImageIndex) {
setState(() {
_selectedImageIndex = i;
});
},
imageAsset: _images[i],
),
],
),
),