Flutter Draggable Object no updating the drag target builder

Hey guys! So, I’m trying to use a draggable object to populate multiple drag targets. I have it to the point where I can initially have each drag target populate with the draggable object I want. But after that, every time I drag one object over another, instead of this object replacing the old one, when I release the object it just snaps back to it’s old spot and the drag target that I want to drag it to just stays the same as before and doesn’t update the object.

Could you give me any help with this?

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/gestures.dart';
import 'package:volleyball_rotations/components/Player.dart';
import 'package:volleyball_rotations/components/RoundedButton.dart';
import 'home_screen.dart';
import 'welcome_screen.dart';
import 'package:flutter/material.dart';
import 'package:volleyball_rotations/components/Player.dart';

class CourtScreen extends StatefulWidget {
  static const String id = 'court_screen';

  @override
  _CourtScreenState createState() => _CourtScreenState();
}

class _CourtScreenState extends State<CourtScreen> {
  final _auth = FirebaseAuth.instance;
  bool successfulDrop = false;

  @override
  Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Flexible(
              child: Hero(
                tag: 'logo',
                child: Material(
                  color: Colors.white,
                  child: InkWell(
                    onTap: () {
                      Navigator.pushNamed(context, HomeScreen.id);
                    },
                    child: Image.asset(
                      'images/logo.png',
                      height: 80,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ),
            Flexible(
              child: Hero(
                tag: 'logout',
                child: Material(
                  color: Colors.white,
                  child: InkWell(
                    onTap: () {
                      _auth.signOut();
                      Navigator.pushReplacementNamed(
                          context, WelcomeScreen.id);
                    },
                    child: Image.asset(
                      'images/logout.png',
                      height: 80,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            buildDragTarget(players[2]),
            buildDragTarget(players[3]),
            buildDragTarget(players[4])
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            buildDragTarget(players[1]),
            buildDragTarget(players[0]),
            buildDragTarget(players[5])
          ],
        ),
        SizedBox(
          height: 100,
        ),
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: <Widget>[
              buildDragTarget(players[9]),
              buildDragTarget(players[8]),
              buildDragTarget(players[7]),
              buildDragTarget(players[6]),
            ],
          ),
        ),
        new RoundedButton(
            colour: Colors.blueAccent.shade700,
            title: 'Rotate',
            onPressed: () {
              setState(() {
                rotatePlayers();
              });
            }),
      ],
    ),
  ),
);
  }

  Draggable<Player> buildDraggable(Player player) {
return new Draggable(
  data: player,
  child: Column(
    children: <Widget>[
      Image.asset('images/${player.gender}.png', height: 80),
      Text(
        '${player.lastName}',
        style: Theme.of(context).textTheme.body1,
      ),
    ],
  ),
  feedback: Column(
    children: <Widget>[
      Image.asset('images/${player.gender}.png', height: 80),
      Text(
        '${player.lastName}',
        style: Theme.of(context).textTheme.body1,
      ),
    ],
  ),
  childWhenDragging: Padding(
    padding: const EdgeInsets.all(8.0),
    child: SizedBox(
      height: 80,
      width: 64,
    ),
  ),
);
  }

  rotatePlayers() {
players.insert(0, players.last);
players.removeLast();
  }

  DragTarget<Player> buildDragTarget(Player player) {
Player positionHolder = player;
return new DragTarget(
  builder: (BuildContext context, List<Player> incoming, List rejected) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: buildDraggable(positionHolder),
    );
  },
  onAccept: (data) {
    setState(() {
      positionHolder = data;
      print('accepted');
      print(positionHolder.lastName);
    });
  },
);
  }
}
1 Like

Is there anybody that would be able to give me a hand with this? It’s the one thing getting in the way of my project.

Hey @Roodiger , I myself don’t have experience with Draggable Widget, but I snooped around a bit and came across this article. The implementation is quite similar to your requirement, do take a look :slight_smile:

Hope it helps.

1 Like

I will take a look! Thank you for taking the time to send that my way.

2 Likes