stack-based-solution

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new FillBlanks(),
        backgroundColor: Colors.green,
      ),
    );
  }
}

class FillBlanks extends StatefulWidget {
  @override
  _AppState createState() => new _AppState();
}

class _AppState extends State<FillBlanks> {
  Color caughtcolor = Colors.grey;
  @override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        new DragBox(new Offset(30.0, 20.0), 'P', Colors.blueAccent),
        new DragBox(new Offset(120.0, 20.0), 'S', Colors.orange),
        new DragBox(new Offset(230.0, 20.0), 'T', Colors.pink),
        new DragBox(new Offset(330.0, 20.0), 'L', Colors.yellow),
        new Positioned(
          //   First position
          bottom: 20.0,
          left: 30.0,
          child: new DragTarget(
            onAccept: (Color color) {
              caughtcolor = color;
            },
            builder: (
              BuildContext context,
              List<dynamic> accepted,
              List<dynamic> rejected,
            ) {
              return new Container(
                width: 60.0,
                height: 60.0,
                decoration: new BoxDecoration(
                  color: accepted.isEmpty ? caughtcolor : Colors.grey.shade200,
                ),
                child: new Center(
                  child: new Text("A"),
                ),
              );
            },
          ),
        ),
        new Positioned(
          left: 130.0,
          bottom: 20.0,
          child: new DragTarget(
            onAccept: (Color color) {
              caughtcolor = color;
            },
            builder: (
              BuildContext context,
              List<dynamic> accepted,
              List<dynamic> rejected,
            ) {
              return new Container(
                width: 60.0,
                height: 60.0,
                decoration: new BoxDecoration(
                  color: accepted.isEmpty ? caughtcolor : Colors.grey.shade200,
                ),
                child: new Center(
                  child: new Text("B"),
                ),
              );
            },
          ),
        ),
        new Positioned(
          left: 230.0,
          bottom: 20.0,
          child: new DragTarget(
            onAccept: (Color color) {
              caughtcolor = color;
            },
            builder: (
              BuildContext context,
              List<dynamic> accepted,
              List<dynamic> rejected,
            ) {
              return new Container(
                width: 60.0,
                height: 60.0,
                decoration: new BoxDecoration(
                  color: accepted.isEmpty ? caughtcolor : Colors.grey.shade200,
                ),
                child: new Center(
                  child: new Text("C"),
                ),
              );
            },
          ),
        ),
        new Positioned(
          left: 330.0,
          bottom: 20.0,
          child: new DragTarget(
            onAccept: (Color color) {
              caughtcolor = color;
            },
            builder: (
              BuildContext context,
              List<dynamic> accepted,
              List<dynamic> rejected,
            ) {
              return new Container(
                width: 60.0,
                height: 60.0,
                decoration: new BoxDecoration(
                  color: accepted.isEmpty ? caughtcolor : Colors.grey.shade200,
                ),
                child: new Center(
                  child: new Text("D"),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

class DragBox extends StatefulWidget {
  final Offset initPos;
  final String label;
  final Color itemcolor;

  DragBox(this.initPos, this.label, this.itemcolor);
  @override
  _DragBoxState createState() => new _DragBoxState();
}

class _DragBoxState extends State<DragBox> {
  Offset position = new Offset(0.0, 0.0);
  @override
  void initState() {
    // TODO: implement initState
    position = widget.initPos;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Positioned(
        left: position.dx,
        top: position.dy,
        child: new Draggable(
          data: widget.itemcolor,
          child: new Container(
            width: 60.0,
            height: 60.0,
            color: widget.itemcolor,
            child: new Center(
              child: new Text(
                widget.label,
                style: new TextStyle(
                  color: Colors.white,
                  decoration: TextDecoration.none,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
          onDraggableCanceled: (velocity, offset) {
            //setState(() {
            //  position = offset;  To make it so that the drag boxes do not stay when dropped.
            //});
          },
          feedback: new Container(
            width: 60.0,
            height: 60.0,
            color: widget.itemcolor.withOpacity(0.5),
            child: new Center(
              child: new Text(
                widget.label,
                style: new TextStyle(
                  color: Colors.white,
                  decoration: TextDecoration.none,
                  fontSize: 18.0,
                ),
              ),
            ),
          ),
        ));
  }
}