Flutter have multiple DragTarget widgets which are independent

Question

I have been working with flutter for a couple months so i'm still learning. I found an example of something similar which im adjusting to what i need.

I need to have multiple DragTarget widgets on the screen when i drop a shape into it i don't want all of them to update just the one where i drop the shape.

Home.dart

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(APP_BAR_TITLE),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          Provider.of<Data>(context).initializeDraggableList();
          Provider.of<Data>(context).changeSuccessDrop(false);
        },
        elevation: 20.0,
        label: Text('Reset'),
      ),
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.only(top: 12.0),
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CardStackWidget(),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: DragTargetWidget(),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: DragTargetWidget(),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: DragTargetWidget(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

DragTargetWidget.dart

class DragTargetWidget extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return DragTarget(onWillAccept: (data) {
      return true;
    }, onAccept: (CardItem data) {
      if (Provider.of<Data>(context).itemsList.length >= 1) {
        Provider.of<Data>(context).removeLastItem();
        Provider.of<Data>(context).changeSuccessDrop(true);
        Provider.of<Data>(context).changeAcceptedData(data);
      }
    }, builder: (context, List<CardItem> cd, rd) {
      if (Provider.of<Data>(context).isSuccessDrop) {
        return Padding(
          padding: const EdgeInsets.all(25.0),
          child: Stack(
            children: buildTargetList(Provider.of<Data>(context).getAcceptedData),
          ),
        );
      } else {
        return Padding(
          padding: const EdgeInsets.all(25.0),
          child: DottedBorder(
            color: Colors.black,
            gap: 3,
            strokeWidth: 1,
            child: Container(
                height: 100.0,
                width: 100.0,
                color: Colors.grey[400],
                child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5)),
                  color: Colors.grey[400],
                  child: Center(
                    child: Text(
                      DROP_ITEMS_HERE,
                      style: TextStyle(color: Colors.black, fontSize: 22.0),
                    ),
                  ),
                )),
          ),
        );
      }
    });
  }

  List<Widget> buildTargetList(CardItem cardItem) {
    List<Widget> targetList = [];
    targetList.add(
      DottedBorder(
        gap: 3,
        strokeWidth: 1,
        color: Colors.black,
        child: Container(
          height: 100.0,
          width: 100.0,
          child: Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0)),
            color: cardItem.cardColor,
            child: Center(
                child: Text(
              '${cardItem.content}',
              style: TextStyle(fontSize: 25.0, color: WHITE_COLOR),
            )),
          ),
        ),
      ),
    );
    return targetList;
  }
}

Dropping one of the shapes in any of the DropTarget shapes updates all of them. I'm not sure if this is because i'm using the same List for everything, or if its something else.

Answer 1

Probably too late, but it seems each of the targets gets info about their own status from a provider. So when you drop the object the info gets changed in the provider, since all of the targets depend on that provider they ALL change their status.

A solution could be to not rely on a provider but transform the widget in stateful and use local variables inside the widget, so each can be independent