[flutter] 플러터 Swipeable을 이용한 선 그리기 구현 방법

08 Dec 2023

flutter

플러터 앱에서 Swipeable을 이용하여 사용자의 드래그 동작으로 선을 그리는 기능을 구현하는 방법을 살펴보겠습니다. 이를 통해 사용자는 화면을 터치하고 드래그하여 선을 그을 수 있게 됩니다.

구현 방법

Swipeable 위젯을 사용하여 드래그 동작을 감지하고 상호작용할 수 있도록 합니다.
사용자의 터치 및 드래그 동작을 처리하기 위해 GestureDetector 위젯을 추가합니다.
화면에 그려지는 선을 관리하기 위한 상태 정보를 유지하기 위해 Stateful 위젯을 사용합니다.
CustomPainter 클래스를 활용하여 선을 그리는 로직을 구현합니다.

아래는 선을 그리는 기능을 포함한 Swipeable 위젯과 GestureDetector를 사용한 플러터 코드의 간단한 예제입니다.

import 'package:flutter/material.dart';

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

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

class DrawLineScreen extends StatefulWidget {
  @override
  _DrawLineScreenState createState() => _DrawLineScreenState();
}

class _DrawLineScreenState extends State<DrawLineScreen> {
  List<Offset> points = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipe to draw'),
      ),
      body: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            points = List.from(points)..add(details.globalPosition);
          });
        },
        onPanEnd: (details) {
          points.add(null);
        },
        child: CustomPaint(
          painter: DrawLine(points),
        ),
      ),
    );
  }
}

class DrawLine extends CustomPainter {
  List<Offset> points;
  DrawLine(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;
  }
}

이 예제에서는 사용자의 터치 및 드래그 동작을 감지하고, 그에 맞게 선을 그리는 플러터 앱을 구현했습니다. 만일 다른 방법으로도 구현하고 싶거나, 문제가 발생한 경우 커뮤니티에서 더 많은 정보를 얻을 수 있습니다.

위의 예제 코드를 실행하면 사용자가 화면을 터치하여 원하는 형태로 선을 그릴 수 있게 됩니다.

플러터의 Swipeable을 이용하여 선을 드래그하는 간단한 예제를 살펴봤습니다. 플러터에서 다양한 상호작용 요소를 이용하여 사용자 경험을 향상시킬 수 있습니다.

본문 작성에 참고된 출처: