How to toggle in Flutter Stateless widget

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),
    );
  },
);