[flutter] getX 함수를 사용하여 터치 이벤트에 따른 캔버스 위젯에 그림 그리기

04 Dec 2023

flutter

이번 글에서는 Flutter에서 getX 함수를 사용하여 터치 이벤트에 따라 캔버스 위젯에 그림을 그리는 방법에 대해 알아보겠습니다.

1. getX 함수란?

getX 함수는 Flutter의 Get 패키지에서 제공하는 함수로, 사용자의 터치 이벤트를 간편하게 처리할 수 있습니다. getX 함수는 현재 사용자의 터치 위치를 반환해주는 역할을 합니다.

2. 프로젝트 설정

먼저, 프로젝트에 Get 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

의존성을 추가한 후에는 flutter packages get 명령어를 실행하여 패키지를 가져옵니다.

3. 캔버스 위젯 생성하기

다음으로, 캔버스 위젯을 생성합니다. 이 캔버스 위젯은 사용자의 터치 이벤트에 따라 그림을 그리게 될 공간을 제공합니다.

import 'package:flutter/material.dart';

class CanvasWidget extends StatefulWidget {
  @override
  _CanvasWidgetState createState() => _CanvasWidgetState();
}

class _CanvasWidgetState extends State<CanvasWidget> {
  List<Offset> _points = [];

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          RenderBox renderBox = context.findRenderObject();
          Offset localPosition =
              renderBox.globalToLocal(details.globalPosition);
          _points = List.from(_points)..add(localPosition);
        });
      },
      onPanEnd: (DragEndDetails details) => _points.add(null),
      child: CustomPaint(
        painter: CustomPainter(
          points: _points,
        ),
      ),
    );
  }
}

위 코드에서 사용한 CanvasWidget은 GestureDetector를 포함하고 있습니다. GestureDetector는 사용자의 터치 이벤트를 처리하기 위해 사용됩니다. onPanUpdate 콜백 함수에서는 getX 함수를 사용하여 사용자의 터치 위치를 _points 리스트에 추가합니다. onPanEnd 콜백 함수에서는 사용자의 터치 종료를 나타내기 위해 _points 리스트에 null을 추가합니다. 이렇게 함으로써 캔버스 위젯에서 그림을 그리기 위한 정보를 저장할 수 있습니다.

캔버스 위젯은 CustomPaint 위젯으로 감싸져 있으며, CustomPaint는 _points를 그리기 위한 CustomPainter 객체를 전달합니다.

4. 그림 그리기

이제 그림을 그리기 위한 CustomPainter를 생성해보겠습니다.

import 'package:flutter/material.dart';

class CustomPainter extends CustomPainter {
  List<Offset> points;

  CustomPaint({required this.points});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;

    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i], points[i + 1], paint);
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

CustomPainter 클래스는 CustomPaint 위젯에서 사용하기 위한 그리기 로직을 담고 있습니다. paint 함수에서는 주어진 points 리스트를 기반으로 선을 그립니다. 터치 이벤트로부터 얻은 좌표값들을 canvas.drawLine 함수를 이용하여 선을 그립니다.

shouldRepaint 함수는 그려진 그림이 다시 그려져야 하는지를 결정하는 함수입니다. 항상 true를 반환하도록 하여 새로운 터치 이벤트가 발생할 때마다 그림을 그릴 수 있도록 합니다.

5. 사용하기

이제 위에서 생성한 CanvasWidget을 사용하여 그림 그리기 기능을 추가할 수 있습니다. 예를 들어, HomePage 위젯에 CanvasWidget을 추가해보겠습니다:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Canvas Drawing'),
      ),
      body: Center(
        child: CanvasWidget(),
      ),
    );
  }
}

이제 앱을 실행하면 캔버스 위젯이 나타나며, 사용자의 터치 이벤트에 따라 그림을 그릴 수 있습니다.

이상으로, Flutter에서 getX 함수를 사용하여 터치 이벤트에 따른 캔버스 위젯에 그림을 그리는 방법에 대해 알아보았습니다. getX 함수를 사용하면 터치 이벤트 처리가 간편해지며, 캔버스 위젯을 통해 그림을 그릴 수 있습니다.

참고 자료: