[flutter] getX 함수를 사용하여 터치 이벤트에 따른 브러시 크기 조절하기

04 Dec 2023

flutter

개요

Flutter에서 getX 함수를 사용하여 터치 이벤트에 따른 브러시 크기를 조절하는 방법을 소개합니다. getX 함수는 OndragUpdate 이벤트에서 이동한 x축 위치를 반환하는 함수입니다. 이를 활용하여 터치 이벤트에 따라 브러시의 크기를 조절할 수 있습니다.

코드 예시

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DrawingApp(),
    );
  }
}

class DrawingApp extends StatefulWidget {
  @override
  _DrawingAppState createState() => _DrawingAppState();
}

class _DrawingAppState extends State<DrawingApp> {
  double brushSize = 5.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawing App'),
      ),
      body: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            // 터치 이벤트에 따라 브러시 크기 조절
            brushSize = details.delta.dx.abs() + brushSize;
          });
        },
        child: CustomPaint(
          painter: DrawingPainter(brushSize: brushSize),
          child: Container(),
        ),
      ),
    );
  }
}

class DrawingPainter extends CustomPainter {
  final double brushSize;

  DrawingPainter({required this.brushSize});

  @override
  void paint(Canvas canvas, Size size) {
    // 브러시 크기에 따른 패인트 설정
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = brushSize
      ..strokeCap = StrokeCap.round;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 100, paint);
  }

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

설명

MyApp 클래스에서 MaterialApp을 사용하여 앱을 구성하고, DrawingApp을 홈 화면으로 설정합니다.
DrawingApp 클래스에서는 _DrawingAppState 클래스를 상속하며, 상태를 관리합니다.
brushSize는 현재 브러시의 크기를 나타내는 변수입니다. 초기값은 5.0으로 설정합니다.
GestureDetector를 사용하여 터치 이벤트를 감지하고, onPanUpdate 이벤트에서 터치 이벤트에 따라 브러시의 크기를 조절합니다.
CustomPaint 위젯을 사용하여 브러시를 그립니다. DrawingPainter 클래스를 이용하여 패인트 설정과 원을 그려줍니다.
DrawingPainter 클래스에서는 brushSize를 기반으로 브러시의 크기를 설정하고, CustomPainter를 상속하여 그리기 로직을 구현합니다.

결론

Flutter에서 getX 함수를 사용하여 터치 이벤트에 따른 브러시 크기를 조절하는 방법을 알아보았습니다. 이를 활용하면 사용자의 터치 동작을 감지하여 동적으로 브러시 크기를 조절할 수 있습니다. 이를 통해 더 직관적이고 다양한 그래픽 작업을 구현할 수 있습니다.