쏘니의 개발블로그

Flutter에서 클릭 이벤트를 처리하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 ElevatedButton과 같은 버튼 위젯을 사용하는 것이며, 보다 정밀한 제어가 필요할 때는 GestureDetector 위젯을 사용할 수 있습니다. 각각의 방법에 대해 설명하겠습니다.

1. ElevatedButton 클릭 이벤트

ElevatedButton은 Flutter에서 기본적으로 제공되는 버튼 위젯 중 하나입니다. 사용자가 버튼을 클릭했을 때 특정 동작을 수행하기 위해 onPressed 콜백을 정의합니다.

body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button clicked!');
            },
            child: Text('Click Me'),
          ),
        ),

body: Center(
  child: TextButton(
    onPressed: () => print("버튼이 클릭되었습니다."),
    child: const Text("버튼"),
  ),
),

button 을 클릭해야지만 프린트 부분이 출력됩니다. 

2. GestureDetector 클릭 이벤트

GestureDetector 위젯은 더 정밀하게 제어할 수 있는 다양한 제스처 이벤트를 처리할 수 있습니다. 클릭(탭), 두 번 클릭, 길게 누르기 등 다양한 제스처를 처리할 수 있습니다.

body: Center(
  child: GestureDetector(
    onTap: () => print("gesture detect on tap"),
    child: Container(
      width: 200,
      height: 200,
      color: Colors.amber,
    ),
  ),
),

body: Center(
          child: GestureDetector(
            onTap: () {
              print('Container clicked!');
            },
            onDoubleTap: () {
              print('Container double-clicked!');
            },
            onLongPress: () {
              print('Container long-pressed!');
            },
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Tap me',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ),
        )

container 부분을 클릭해야지만 Print 가 출력이 됩니다. 

레퍼런스

• ElevatedButton 문서

• GestureDetector 문서