import 'dart:ui';

import 'package:flutter/material.dart';

void main() async {
  runApp(const MaterialApp(
      debugShowCheckedModeBanner: false, home: DistanceProvider()));
}

class DistanceProvider extends StatelessWidget {
  const DistanceProvider({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Finds the center of the screen
    final width = MediaQuery.of(context).size.width / 2;
    final height = MediaQuery.of(context).size.height / 2;

    return Scaffold(
      body: InteractiveViewer(
        child: Stack(
          children: [
            // Draws a line using the Custom painter at the center of the screen (width :400 px)
            CustomPaint(
              size: Size.infinite,
              painter: _DrawPath(
                offsetPoints: [
                  Offset(width - 200, height),
                  Offset(width + 200, height)
                ],
              ),
            ),
            // Places a text box to enter the distance between the two points
            Center(
              child: Container(
                width: 50,
                decoration: const BoxDecoration(color: Colors.white),
                child: TextField(
                  onChanged: (String value) {},
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

///Creates a path by drawing a line from one consecutive point to the next
class _DrawPath extends CustomPainter {
  _DrawPath({
    required this.offsetPoints,
  });

  final List<Offset> offsetPoints;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawPoints(PointMode.polygon, offsetPoints, Paint());
  }

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