import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Draggable elements',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: TextOverflowDemo(),
      ),
    );
  }
}

class TextOverflowDemo extends StatefulWidget {
  @override
  _TextOverflowDemoState createState() => _TextOverflowDemoState();
}

class _TextOverflowDemoState extends State<TextOverflowDemo> {
  Map<String, Offset> offsets = {
    'start': Offset(70, 100),
    'finish': Offset(200, 100),
    'center': Offset(100, 200),
  };

  Function onDragStart(String name) => (x, y) {
        print('$x, $y');
        setState(() {
          offsets[name] = Offset(x, y);
        });
      };

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        CustomPaint(
          size: Size(double.infinity, double.infinity),
          painter: CurvedPainter(
            start: offsets['start'],
            finish: offsets['finish'],
            center: offsets['center'],
          ),
        ),
        ManipulatingBall(
          onDragStart: onDragStart('start'),
          offset: offsets['start'],
        ),
        ManipulatingBall(
          onDragStart: onDragStart('finish'),
          offset: offsets['finish'],
        ),
        ManipulatingBall(
          onDragStart: onDragStart('center'),
          offset: offsets['center'],
        ),
      ],
    );
  }
}

class ManipulatingBall extends StatelessWidget {
  ManipulatingBall({Key key, this.offset, this.onDragStart});

  final double diameter = 30;
  final Offset offset;
  final Function onDragStart;

  _handleDrag(details) {
    var x = details.globalPosition.dx;
    var y = details.globalPosition.dy;
    onDragStart(x, y);
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: offset.dx - diameter / 2,
      top: offset.dy - diameter / 2,
      child: GestureDetector(
        onPanStart: _handleDrag,
        onPanUpdate: _handleDrag,
        child: Container(
          width: diameter,
          height: diameter,
          decoration: BoxDecoration(
            color: Colors.blue.withOpacity(0.5),
            shape: BoxShape.circle,
          ),
        ),
      ),
    );
  }
}

class CurvedPainter extends CustomPainter {
  CurvedPainter({
    this.start,
    this.finish,
    this.center,
  });

  final Offset start;
  final Offset finish;
  final Offset center;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(
      start,
      finish,
      Paint()
        ..color = Colors.red
        ..strokeWidth = 2,
    );

    canvas.drawRect(
      Rect.fromCenter(
        center: center,
        width: 100,
        height: 100,
      ),
      Paint()
        ..color = Colors.greenAccent
        ..strokeWidth = 2,
    );
  }

  @override
  bool shouldRepaint(CurvedPainter oldDelegate) => true;
}