Flutter Dismissible Unique Keys

Question

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?

I believe so. I loop through `widget.data` (my strings) and return a list of `Dismissible` widgets. So when `onDismissed` is called, I update `widget.data` and call `setState` to rebuild. The error only occurs when the `data` strings match, hence my belief it is the `key` is is the problem. — Josh Kahane, Jun 23 '18 at 16:01

score 8 · Accepted Answer · answered Jun 23 '18 at 16:41

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).

Flutter Dismissible Unique Keys

1 Answers1