ReorderableListViewChildGlobalKey used by multiple widgets

49 Views Asked by At

I understand that each item needs a key to uniquely identify it especially since they can be moved around. The error I get is:

The key [_ReorderableListViewChildGlobalKey ValueKey#46dc3] was used by multiple widgets

Each item in my list is already uniquely identified in my dismissable widget.

Widget mainCardWidget(BuildContext context) {
    return ReorderableListView(
      onReorder: onReorder,
      physics: const BouncingScrollPhysics(
          parent: AlwaysScrollableScrollPhysics()),
      children: _getListItems(),
    );
  }

  void onReorder(int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final Rung element = _items.removeAt(oldIndex);
      _items.insert(newIndex, element);
    });
  }

  List<Widget> _getListItems() => _items
      .asMap()
      .map((i, item) => MapEntry(i, _buildTenableListTile(item, i)))
      .values
      .toList();

  Widget _buildTenableListTile(Rung item, int index) {
    return Dismissible(
      key: Key(item.rungId),
      onDismissed: (direction) {
        setState(() {
          _items.removeAt(index);
          _removeditems.add(item);
        });
      },
      background: Container(color: Colors.red),
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Card(child: cardWithInfoPage(item, context, index)),
      ),
    );
  }
1

There are 1 best solutions below

0
Y. Sampaio On

I was receiving this same error and the main reason was that I was filling in my item.id at initState, so I moved the responsibility outside my StatefullObject, and it works for me.

void main() {
  runApp(
    MaterialApp(
      home: ReorderableListModelView(
        items: [
          ItemModel(iconReorderable: Icons.menu, replaced: Icons.ac_unit, text: "Teste 1", id: 0),
          ItemModel(iconReorderable: Icons.menu, replaced: Icons.ac_unit, text: "Teste 2", id: 1),
          ItemModel(iconReorderable: Icons.menu, replaced: Icons.ac_unit, text: "Teste 3", id: 2),
          ItemModel(iconReorderable: Icons.menu, replaced: Icons.ac_unit, text: "Teste 4", id: 3),
        ],
      ),
    ),
  );
}

class ReorderableListModelView extends StatefulWidget {
  final List<ItemModel> items;
  const ReorderableListModelView({super.key, required this.items});

  @override
  State<ReorderableListModelView> createState() => _ReorderableListModelViewState();
}

class _ReorderableListModelViewState extends State<ReorderableListModelView> {
  final items = <ItemModel>[];

  @override
  void initState() {
    setState(() {
      items.addAll(widget.items);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ReorderableListView(
        shrinkWrap: true,
        onReorder: (oldIndex, newIndex) {
          setState(() {
            final item = items[oldIndex];
            items.removeAt(oldIndex);
            items.insert(newIndex, item);
          });
        },
        children: [
          for (int i = 0; i < items.length; i++)
            ListTile(
              key: ValueKey<String>(items[i].id.toString()),
              title: Text(items[i].text),
            )
        ],
      ),
    );
  }
}