Drag Drop

main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlChart Demo',
      showPerformanceOverlay: false,
      theme: ThemeData(
        primaryColor: const Color(0xff262545),
        primaryColorDark: const Color(0xff201f39),
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(title: 'fl_chart'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Color? draggedColor1, draggedColor2, draggedColor3;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  DraggableLogo(color: Colors.red),
                  SizedBox(width: 16),
                  DraggableLogo(color: Colors.green),
                  SizedBox(width: 16),
                  DraggableLogo(color: Colors.blue),
                ],
              ),
              SizedBox(height: 150),
              TextButton(
                onPressed: () {
                  setState(() {
                    draggedColor1 = null;
                    draggedColor2 = null;
                    draggedColor3 = null;
                  });
                },
                child: Text(
                  'clear',
                  style: TextStyle(fontSize: 28),
                ),
              ),
              SizedBox(height: 150),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  DragLogoTarget(
                    draggedColor: draggedColor1,
                    onAccept: (color) {
                      setState(() {
                        draggedColor1 = color;
                      });
                    },
                  ),
                  SizedBox(width: 16),
                  DragLogoTarget(
                    draggedColor: draggedColor2,
                    onAccept: (color) {
                      setState(() {
                        draggedColor2 = color;
                      });
                    },
                  ),
                  SizedBox(width: 16),
                  DragLogoTarget(
                    draggedColor: draggedColor3,
                    onAccept: (color) {
                      setState(() {
                        draggedColor3 = color;
                      });
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

class DraggableLogo extends StatelessWidget {
  final Color color;

  const DraggableLogo({
    Key? key,
    required this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Draggable(
      child: ColoredLogo(color: color),
      childWhenDragging: Opacity(
        child: ColoredLogo(color: color),
        opacity: 0.8,
      ),
      feedback: Opacity(
        child: ColoredLogo(color: color),
        opacity: 0.4,
      ),
      data: color,
    );
  }
}

class DragLogoTarget extends StatelessWidget {
  final Color? draggedColor;
  final DragTargetAccept<Color>? onAccept;

  const DragLogoTarget({
    Key? key,
    required this.draggedColor,
    required this.onAccept,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DragTarget<Color>(
      builder: (context, candidateData, rejectedData) {
        if (draggedColor != null) {
          return ColoredLogo(color: draggedColor!);
        }
        Color? color;
        if (candidateData.isNotEmpty) {
          color = candidateData[0] as Color;
        }
        return ColoredLogo(
          color: color ?? Colors.white12,
        );
      },
      onWillAccept: (color) => draggedColor == null,
      onAccept: onAccept,
    );
  }
}

class ColoredLogo extends StatelessWidget {
  final Color color;

  const ColoredLogo({
    Key? key,
    required this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ColorFiltered(
      child: ColorFiltered(
        child: FlutterLogo(
          size: 80,
        ),
        colorFilter: ColorFilter.mode(Colors.white, BlendMode.srcIn),
      ),
      colorFilter: ColorFilter.mode(color, BlendMode.modulate),
    );
  }
}