How to toggle in Flutter Stateless widget - flutter

Question

I want to be able to select one item from a list, and when the item is clicked on, the check signed be toggled to checked. I also want to make sure, a user can select just one item from the list at a time.
Here is my recipient card:
class RecipientCard extends StatelessWidget {
const RecipientCard({Key key, this.recipient}) : super(key: key);
final recipient;
#override
Widget build(BuildContext context) {
bool selected = false;
return Card(
child: Row(
children: <Widget>[
Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(4.0),
bottomLeft: const Radius.circular(4.0),
),
),
width: 40.0,
height: 50.0,
// Should be able to toggle the icons here
child: selected ?
IconButton(
icon: Icon(Icons.check),
onPressed: () {
selected = false;
},
) :
IconButton(
icon: Icon(Icons.check_box_outline_blank) ,
onPressed: () {
selected = true;
print(selected);
},
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(10.0),
child: Text.rich(
TextSpan(children: [
TextSpan(text: '${recipient.recipientName}:', style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold)),
TextSpan(text: ' ${recipient.recipientCity} ${recipient.recipientCountry}, Number: ${recipient.recipientPhone}, ${recipient.recipientBank} ${recipient.receiveVia} ',)
]),
style: TextStyle(
fontSize: 14.0,
),
),
),
),
],
),
);
}
}
I call that in a listbuilder as:
return ListView.builder(
shrinkWrap: true,
itemCount: recipients.length,
itemBuilder: (BuildContext context, int index) {
Recipient recipient = recipients[index];
return Dismissible(
key: Key(recipient.id),
onDismissed: (DismissDirection direction) {
removeRecipient(recipient, state);
},
child: RecipientCard(recipient: recipient),
background: Container(color: Colors.red),
);
},
);
How can I achieve this? Thank you

Answer 1

The parent must be responsible for selecting. The child must know whether it is selected or not, and notify the parent when it gets selected.
Try this:
class RecipientCard extends StatelessWidget {
const RecipientCard({
Key key,
this.recipient,
this.selected,
this.onSelect,
}) : super(key: key);
final Recipient recipient;
final bool selected;
final VoidCallback onSelect;
#override
Widget build(BuildContext context) {
return Card(
child: Row(
children: <Widget>[
Container(
...
child: selected
? IconButton(
icon: Icon(Icons.check),
onPressed: onSelect,
)
: IconButton(
icon: Icon(Icons.check_box_outline_blank),
onPressed: onSelect,
),
...
),
],
),
),
);
// this variable must be in your class' scope
int selectedIndex;
...
return ListView.builder(
shrinkWrap: true,
itemCount: recipients.length,
itemBuilder: (BuildContext context, int index) {
Recipient recipient = recipients[index];
return Dismissible(
key: Key(recipient.id),
onDismissed: (DismissDirection direction) {
removeRecipient(recipient, state);
},
child: RecipientCard(
recipient: recipient,
selected: selectedIndex == index,
onSelect: () {
setState(() => selectedIndex = index);
},
),
background: Container(color: Colors.red),
);
},
);