Flutter Simple 그림판 (2)

드로잉 탭 컨트롤러 개선된 버전 코드

import 'package:flutter/material.dart';
import 'package:get/get.dart'; // Ensure GetX is still used for dependency injection.

class TapController extends GetxController {
  var startStr = 'Tap Somewhere'.obs;
  var endStr = ''.obs;
  var dragStr = ''.obs; // Add this line for drag coordinates
  bool isDrawing = false;
  // starting point
  Offset? start;
  // dragging point
  Offset? drag;
  // ending point
  Offset? end;

  void notifyEnd() {
    isDrawing = false;
  }

  // Add this method for updating drag coordinates
  void updateDragCoordinates(Offset newCoordinates) {
    if (!isDrawing) {
      // If the user is not dragging, then the current drag coordinates are the starting point
      updateStartingPoint(newCoordinates);
    }
    // Update the drag coordinates
    updateDragPoint(newCoordinates);

    isDrawing = true;
  }

  void updateStartingPoint(Offset newStart) {
    startStr.value = newStart.toString();
    start = newStart;
  }
  void updateDragPoint(Offset newDrag) {
    dragStr.value = newDrag.toString();
    drag = newDrag;
  }
  void updateEndingPoint(Offset newEnd) {
    endStr.value = newEnd.toString();
    end = newEnd;
  }
}

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final TapController tapController = Get.put(TapController());

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GetX Dragging End Coordinates App'),
        ),
        body: GestureDetector(
          onTapDown: (TapDownDetails details) {

          },
          onPanUpdate: (DragUpdateDetails details) {
            // Keep updating the drag coordinates and the end position as the user drags
            tapController.updateDragCoordinates(details.globalPosition);
            tapController.updateEndingPoint(details.globalPosition); // 마지막 위치를 업데이트합니다.
          },
          onPanEnd: (DragEndDetails details) {
            // When the user stops dragging, notify the controller
            tapController.notifyEnd();
          },

          child: Container(
            color: Colors.lightBlueAccent,
            alignment: Alignment.center,
            child: Obx(() => Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text("Start: ${tapController.startStr.value}"), // Starting coordinates
                SizedBox(height: 20), // Provide some spacing
                Text("Drag: ${tapController.dragStr.value}"), // Drag coordinates
                SizedBox(height: 20), // Provide some spacing
                Text("End: ${tapController.endStr.value}"), // Ending coordinates
              ],
            )),
          ),
        ),
      ),
    );
  }
}

이전 포스팅에서 작성했던 드로잉 탭 컨트롤러에서는

starting point와 end point에 좌표를 할당하는 것을 지금처럼 onPanUpdate()에서 전부 처리하지 않고,

onTapDown()에는 starting point를, onPanEnd()에는 end point를 직접 할당했었다.

하지만 이 두 이벤트 처리에 딜레이가 있고 단축이 어려운 것으로 판단되어,

마우스(터치)의 드래깅 움직임이 실시간 반영되는 onPanUpdate() 이벤트에서

모든 좌표 할당을 처리하기로 바꾸었다.

그 코드는 위와 같다.