[flutter] getX 함수를 사용하여 터치 이벤트에 따른 도형 그리기
Flutter는 터치 이벤트를 처리하고 그에 따라 화면에 도형을 그릴 수 있는 강력한 기능을 제공합니다. getX 함수는 터치 이벤트의 x 좌표를 얻을 수 있는 함수로, 이를 활용하여 사용자의 터치 위치에 따라 도형을 그릴 수 있습니다.
1. getX 함수 이해
Flutter의 getX 함수는 GestureDetector 위젯을 통해 사용할 수 있습니다. 따라서 getX 함수를 사용하기 위해서는 다음과 같은 과정이 필요합니다.
GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
double xPos = details.globalPosition.dx;
// 터치 위치를 이용하여 도형 그리기 로직 작성
},
child: Container(
// 화면 스타일 및 위치 설정
),
),
위의 코드에서 onPanUpdate 콜백 함수를 사용하여 터치 이벤트를 처리하고, details.globalPosition.dx를 사용하여 x 좌표를 얻습니다. 이제 이 x 좌표를 이용하여 도형을 그리는 로직을 작성할 수 있습니다.
2. 도형 그리기 예제
다음은 getX 함수를 사용하여 터치 이벤트에 따라 원을 그리는 예제 코드입니다.
import 'package:flutter/material.dart';
class MyDrawingApp extends StatefulWidget {
@override
_MyDrawingAppState createState() => _MyDrawingAppState();
}
class _MyDrawingAppState extends State<MyDrawingApp> {
List<Offset> points = [];
@override
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (DragUpdateDetails details) {
setState(() {
points.add(details.globalPosition);
});
},
onPanEnd: (DragEndDetails details) {
points.add(null);
},
child: CustomPaint(
painter: MyPainter(points),
size: Size.infinite,
),
);
}
}
class MyPainter extends CustomPainter {
List<Offset> points;
MyPainter(this.points);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.black
..strokeWidth = 3
..strokeCap = StrokeCap.round;
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(covariant CustomPainter oldDelegate) {
return true;
}
}
void main() => runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My Drawing App'),
),
body: MyDrawingApp(),
),
));
위의 코드는 CustomPainter 클래스를 사용하여 그림 그리기를 구현하고, 터치 이벤트를 처리하는 예제입니다. 터치하면 점을 찍고, 드래그하면 점과 점을 선으로 연결하여 그림을 그립니다.