Flutter Dismissible Unique Keys

7,415

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

Share:
7,415
Josh Kahane
Author by

Josh Kahane

Updated on November 23, 2022

Comments

  • Josh Kahane
    Josh Kahane over 1 year

    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?