Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Dismissible Unique Keys

I have a list of Dismissible widgets as follows:

Dismissible(
            direction: DismissDirection.endToStart,
            key: Key(widget.data[i]),
            onDismissed: (direction) {
              widget.onRemoveRequest(i, widget.data[i]);
            },
            background: Container(
              color: Colors.red,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(right: 20.0),
                    child: Text(
                      "Delete",
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                        fontSize: 16.0,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            child: CustomTextField(
              padding: const EdgeInsets.only(left: 30.0, right: 30.0),
              hintText: widget.newEntryHint,
              text: widget.data[i],
              keyboardType: TextInputType.multiline,
              onChanged: (val) {
                widget.onChanged(i, val);
              },
            ),
          )

It works as expected, except for when removing matching objects.

Note: widget.onRemoveRequest removes the object at specified index from the source data, widget.data.

widget.data is a List<String>. I provide these as the key, however whenever I have two matching strings and dismiss one, I get an error because the Dismissible isn't removed from the tree (understandable).

A dismissed Dismissible widget is still part of the tree.

So with a list of strings, how can I ensure each has a unique key, even if the actual strings are equal/match?

like image 410
Josh Kahane Avatar asked Mar 06 '23 23:03

Josh Kahane


1 Answers

You need to assign each data to a unique identifier. Something unique enough for it to not contain any duplicates. Then you can associate that unique identifier to a Key.

This can't be done just with a primitive object such as String or Int. You'll need to map your data to a custom object.

The following class is a good example :

class Data {
  final String id;
  final String title;

  Data({this.id, this.title});
}

This would allows you to then do the following :

Dismissible(
    key: Key(widget.data[i].id),
    ...
)

You can generate a custom ID for your data using uuid package, or using a custom algorithm (such as an incremental index).

But be sure that your ID is unique for each item and stays the same for the whole lifetime of that item (even after updates).

like image 86
Rémi Rousselet Avatar answered Mar 12 '23 18:03

Rémi Rousselet