Make a non-rectangular area draggable

Question

To make a widget draggable, it has to be passed to a Draggable like so:

                 Draggable(
                    data:  "SomeDateToBeDragged",
                    child: Container(
                      width: 300,
                      height: 200,
                      alignment: Alignment.center,
                      color: Colors.purple,
                      child: Image.network(
                        'https://someServer.com/dog.jpg',
                        fit: BoxFit.cover,
                      ),
                    ),
                    ...

As far as I know, a Widget is something rectangular. At least, I found nothing else than rectangular widgets.

I'd like to build a sketching app. Thus, I'd like to make a 'two dimensional' connector [a Line between two points] draggable.

How to I make a line draggable?

In other words: I'd like to make a click initiate a drag only if the drag e.g. is on a painted area and not on transparent background of the area. If I would draw a circle, it would drag if the circle would be clicked. If clicked some pixel outside the circle, it should not start a drag.

Thierry · Accepted Answer

Flutter is incredible in making things that appear complex really easy.

Here is a solution for a draggable segment of line with two handles for its extremities.

As you see, you can grab either the line itself or its extremities.

A quick overview of the solution:

MyApp is the MaterialApp with the Scaffold
CustomPainterDraggable is the main Widget with the State Management
- I used Hooks Riverpod
- Have a look how to use freezed
LinePainter a basic Painter to paint the line and the two handles
Utils, a Utility class to calculate the distance between the cursor and the line or handles. The distance defines which part of the drawing should be dragged around.
Part, a Union class defining the different elements of the drawing (line and handles) to better structure the code.

1. Material App

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:hooks_riverpod/all.dart';

part '66070975.sketch_app.freezed.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Draggable Custom Painter',
        home: Scaffold(
          body: CustomPainterDraggable(),
        ),
      ),
    );
  }
}

2. Part Union

@freezed
abstract class Part with _$Part {
  const factory Part.line() = _Line;
  const factory Part.a() = _A;
  const factory Part.b() = _B;
  const factory Part.noPart() = _NoPart;
}

3. CustomPainterDraggable

class CustomPainterDraggable extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final a = useState(Offset(50, 50));
    final b = useState(Offset(150, 200));
    final dragging = useState(Part.noPart());
    return GestureDetector(
      onPanStart: (details) => dragging.value =
          Utils.shouldGrab(a.value, b.value, details.globalPosition),
      onPanEnd: (details) {
        dragging.value = Part.noPart();
      },
      onPanUpdate: (details) {
        dragging.value.when(
          line: () {
            a.value += details.delta;
            b.value += details.delta;
          },
          a: () => a.value += details.delta,
          b: () => b.value += details.delta,
          noPart: () {},
        );
      },
      child: Container(
        color: Colors.white,
        child: CustomPaint(
          painter: LinePainter(a: a.value, b: b.value),
          child: Container(),
        ),
      ),
    );
  }
}

4. LinePainter

class LinePainter extends CustomPainter {
  final Offset a;
  final Offset b;
  final double lineWidth;
  final Color lineColor;
  final double pointWidth;
  final double pointSize;
  final Color pointColor;

  Paint get linePaint => Paint()
    ..color = lineColor
    ..strokeWidth = lineWidth
    ..style = PaintingStyle.stroke;

  Paint get pointPaint => Paint()
    ..color = pointColor
    ..strokeWidth = pointWidth
    ..style = PaintingStyle.stroke;

  LinePainter({
    this.a,
    this.b,
    this.lineWidth = 5,
    this.lineColor = Colors.black54,
    this.pointWidth = 3,
    this.pointSize = 12,
    this.pointColor = Colors.red,
  });

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(a, b, linePaint);
    canvas.drawRect(
      Rect.fromCenter(center: a, width: pointSize, height: pointSize),
      pointPaint,
    );
    canvas.drawRect(
      Rect.fromCenter(center: b, width: pointSize, height: pointSize),
      pointPaint,
    );
  }

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

5. Utils

class Utils {
  static double maxDistance = 20;

  static Part shouldGrab(Offset a, Offset b, Offset target) {
    if ((a - target).distance < maxDistance) {
      return Part.a();
    }
    if ((b - target).distance < maxDistance) {
      return Part.b();
    }
    if (shortestDistance(a, b, target) < maxDistance) {
      return Part.line();
    }
    return Part.noPart();
  }

  static double shortestDistance(Offset a, Offset b, Offset target) {
    double px = b.dx - a.dx;
    double py = b.dy - a.dy;
    double temp = (px * px) + (py * py);
    double u = ((target.dx - a.dx) * px + (target.dy - a.dy) * py) / temp;
    if (u > 1) {
      u = 1;
    } else if (u < 0) {
      u = 0;
    }
    double x = a.dx + u * px;
    double y = a.dy + u * py;
    double dx = x - target.dx;
    double dy = y - target.dy;
    double dist = math.sqrt(dx * dx + dy * dy);
    return dist;
  }
}

Full Source Code (Easy to copy paste)

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:hooks_riverpod/all.dart';

part '66070975.sketch_app.freezed.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Draggable Custom Painter',
        home: Scaffold(
          body: CustomPainterDraggable(),
        ),
      ),
    );
  }
}

@freezed
abstract class Part with _$Part {
  const factory Part.line() = _Line;
  const factory Part.a() = _A;
  const factory Part.b() = _B;
  const factory Part.noPart() = _NoPart;
}

class CustomPainterDraggable extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final a = useState(Offset(50, 50));
    final b = useState(Offset(150, 200));
    final dragging = useState(Part.noPart());
    return GestureDetector(
      onPanStart: (details) => dragging.value =
          Utils.shouldGrab(a.value, b.value, details.globalPosition),
      onPanEnd: (details) {
        dragging.value = Part.noPart();
      },
      onPanUpdate: (details) {
        dragging.value.when(
          line: () {
            a.value += details.delta;
            b.value += details.delta;
          },
          a: () => a.value += details.delta,
          b: () => b.value += details.delta,
          noPart: () {},
        );
      },
      child: Container(
        color: Colors.white,
        child: CustomPaint(
          painter: LinePainter(a: a.value, b: b.value),
          child: Container(),
        ),
      ),
    );
  }
}

class LinePainter extends CustomPainter {
  final Offset a;
  final Offset b;
  final double lineWidth;
  final Color lineColor;
  final double pointWidth;
  final double pointSize;
  final Color pointColor;

  Paint get linePaint => Paint()
    ..color = lineColor
    ..strokeWidth = lineWidth
    ..style = PaintingStyle.stroke;

  Paint get pointPaint => Paint()
    ..color = pointColor
    ..strokeWidth = pointWidth
    ..style = PaintingStyle.stroke;

  LinePainter({
    this.a,
    this.b,
    this.lineWidth = 5,
    this.lineColor = Colors.black54,
    this.pointWidth = 3,
    this.pointSize = 12,
    this.pointColor = Colors.red,
  });

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawLine(a, b, linePaint);
    canvas.drawRect(
      Rect.fromCenter(center: a, width: pointSize, height: pointSize),
      pointPaint,
    );
    canvas.drawRect(
      Rect.fromCenter(center: b, width: pointSize, height: pointSize),
      pointPaint,
    );
  }

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

class Utils {
  static double maxDistance = 20;

  static Part shouldGrab(Offset a, Offset b, Offset target) {
    if ((a - target).distance < maxDistance) {
      return Part.a();
    }
    if ((b - target).distance < maxDistance) {
      return Part.b();
    }
    if (shortestDistance(a, b, target) < maxDistance) {
      return Part.line();
    }
    return Part.noPart();
  }

  static double shortestDistance(Offset a, Offset b, Offset target) {
    double px = b.dx - a.dx;
    double py = b.dy - a.dy;
    double temp = (px * px) + (py * py);
    double u = ((target.dx - a.dx) * px + (target.dy - a.dy) * py) / temp;
    if (u > 1) {
      u = 1;
    } else if (u < 0) {
      u = 0;
    }
    double x = a.dx + u * px;
    double y = a.dy + u * py;
    double dx = x - target.dx;
    double dy = y - target.dy;
    double dist = math.sqrt(dx * dx + dy * dy);
    return dist;
  }
}