비개발자도 쉽게 이해하는 Flutter 이벤트 처리: onPressed, onTap 맛보기

 
안녕하세요 ! 스테디빌더입니다! 😀👍
 
오늘은 사용자의 동작(버튼 클릭, 화면 터치 등)에 반응하는 방법입니다. 

굳이 용어를 쓰면 이벤트 처리하고 하는데,
여기서 이벤트는 어떠한 일이 일어난 것이죠 ~
그러니까 사용자의 입력 동작을 뜻하고,
처리는 그에 따른 반응 즉, 뭔가 또 작동 시키는 것이죠.

흔히 버튼을 눌렀을 때 로켓이 발사 ... 이건 좀 아니고,
로그인 버튼을 클릭했을 때 로그인이 되는 것 같은거죠.

이미 아는 내용이쥬? 자, 더 알아봅시다.

1. 이벤트 처리란 무엇인가요?

화면에서 사용자가 버튼을 누르거나, 화면을 터치하거나, 글자를 입력하는 동작을 이벤트(Event)라고 불러요. 소개글에서 이미 말씀드렸죠? 굳!

Flutter에서는 이런 이벤트가 발생했을 때 특정 코드를 실행하도록 설정할 수 있습니다.
예를 들어, 버튼을 누르면 메시지를 출력하거나, 화면을 터치하면 색이 바뀌는 등의 작업이 가능한 것이죠.

2. 버튼 클릭 이벤트: onPressed

버튼 클릭의 의미

Flutter에서 버튼은 사용자의 클릭 동작을 처리하는 기본 위젯입니다. 위젯이 또 나왔네요. 위젯은 레고 블럭과 같다고 하죠. 이번엔 버튼 블럭이네요. 혹시 마인크래프트를 해보셨다면 상상이 쉽겠네요~ ㅇㅋ!

이 버튼 위젯에는 onPressed 라는 속성이 있어서, 버튼이 눌렸을 때 어떤 동작을 할지 미리 명령을 해둘 수 있습니다.

예제: 버튼을 눌러 메시지 출력

ElevatedButton(
  onPressed: () {
    print('버튼이 눌렸습니다!');
  },
  child: Text('클릭하세요'),
)

동작 설명:

1. 화면에 "클릭하세요"라는 버튼이 표시됩니다.
2. 사용자가 버튼을 누르면, onPressed 안의 코드가 실행됩니다.
3. 결과적으로 터미널에 "버튼이 눌렸습니다!"라는 메시지가 출력됩니다.

여기서 ElevatedButton 은 흔히 쓰입니다. 이름처럼 약간 올라와 보이는 버튼이예요. 멋진 것은 별다른 스타일을 정하지 않아도 마우스 오버를 하면 색이 변하고, 눌렀을 때도 뭔가 눌린 느낌이 나는 디자인이 입혀져 있어요. 편하죠 ? 굳 !


버튼의 동작을 코드로 미리 작성해두고,
사용자가 버튼을 눌렀을 때 실행되는 방식입니다.


전 여기에서 고민이 될 때가 있어요.
버튼 위치를 먼저 정해야 하나?
아님 버튼이 눌렸을 때 동작을 먼저 만들까?
개발을 하다보면 저와 같은 고민에 빠질 때가 있을 거예요.
이 때는 일단 만들어 보세요. 머리로만 시뮬레이션을 돌리면 계속 닭이 먼저냐 알이 먼저냐 합니다. (ㅎ)

3. 화면 터치 이벤트: onTap

Flutter에서는 화면을 클릭하거나 터치하는 이벤트를 처리할 때 GestureDetector라는 위젯을 사용합니다.

이름 잘 지었죠? 왠지 움직임을 감시 당하는 느낌이네요. (ㅎ)

이 위젯은 사용자의 다양한 동작(클릭, 더블클릭, 스와이프 등)을 감지할 수 있습니다.

예제: 화면 터치 시 색상 변경

GestureDetector(
  onTap: () {
    print('화면이 터치되었습니다!');
  },
  child: Container(
    color: Colors.blue,
    width: 200,
    height: 200,
    child: Center(
      child: Text(
        '터치하세요',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

동작 설명:

1. 파란색 사각형이 화면에 표시됩니다.
2. 사용자가 사각형을 터치하면 onTap 안의 코드가 실행됩니다.
3. 터미널에 "화면이 터치되었습니다!"라는 메시지가 출력됩니다. (앱 화면에 보이는게 아닙니다. 콘솔에서 보셔야 해요!)

사각형 안에서 어떤 동작이 일어나야 하는지 onTap에 정의하면, 사용자의 터치 동작을 감지하고 처리할 수 있습니다.

ElevatedButton 에서는 onPressed 속성이었는데,
GestureDetector 에서는 onTap 속성이네요. 잘 기억해 둡시다.

4. 터치와 클릭의 차이

버튼은 클릭 동작만을 처리하기에 간단하지만, GestureDetector는 더 다양한 동작을 처리할 수 있습니다.
이름만큼 감지를 잘 하는 것이죠 ! 다양하게 활용할 수 있겠네요 ~ 굳 !

예를 들면 , 이런 기능이 있습니다.

• onTap: 터치했을 때
• onDoubleTap: 더블 탭했을 때
• onLongPress: 길게 눌렀을 때
• onPanUpdate: 손가락을 드래그할 때

5. 입력과 클릭을 함께 사용하기

예제: 입력한 내용을 출력하는 버튼

사용자가 글자를 입력하고, 버튼을 누르면 입력된 내용을 출력합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('이벤트 처리 예제'),
        ),
        body: EventExample(),
      ),
    );
  }
}

class EventExample extends StatefulWidget {
  @override
  _EventExampleState createState() => _EventExampleState();
}

class _EventExampleState extends State<EventExample> {
  String inputText = ''; // 입력된 내용을 저장할 변수

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            onChanged: (value) {
              setState(() {
                inputText = value; // 입력된 값 저장
              });
            },
            decoration: InputDecoration(
              labelText: '메시지를 입력하세요',
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              print('입력된 메시지: $inputText');
            },
            child: Text('출력하기'),
          ),
        ],
      ),
    );
  }
}

동작 설명:

1. 사용자가 텍스트 필드에 메시지를 입력합니다.
2. 버튼을 누르면 입력된 메시지가 터미널에 출력됩니다.
3. onChanged와 onPressed를 결합해 이벤트를 처리합니다.

코드가 길어졌죠 ? 하나씩 뜯어봅시다.

String inputText = ''; // 입력된 메시지를 저장

화면에 뿌려줄 텍스트를 담는 변수를 선언합니다.

TextField(
  onChanged: (value) {
    setState(() {
      inputText = value; // 입력된 값을 저장
    });
  },
  decoration: InputDecoration(
    labelText: '메시지를 입력하세요',
    border: OutlineInputBorder(),
  ),
)

여기가 중요 포인트죠?
사용자가 글자를 입력할 때마다 onChanged 가 호출됩니다.
버튼이 눌렸을 때 onPressed 가 동작하는 거랑은 다르죠? 계속 기억해 나갑시다.

(value) 는 사용자가 입력할 때마다 입력값을 계속 갖고 있습니다. 입력한 값을 inputText 변수에 저장하죠.

setState()는 화면을 업데이트하도록 요청합니다.
여기에선 onChanged 즉, 사용자 입력이 있을 때마다 inputText 에 값을 넣어주고, inputText 는 화면에 이미 보여지고 있으니까 계속계속 업데이트가 되는거죠.

화면을 보면 쉬운데 말로 하려니 복잡해 보이네요.
그래도 눈으로 보이지 않는 동작들에 대해서 이해가 되시죠? 굿굿.

6. 일상적인 예로 이해하기

스마트폰을 사용할 때:

• 앱 아이콘을 터치하면 앱이 열립니다. (onTap)
• 버튼을 누르면 특정 작업이 실행됩니다. (onPressed)
• 키보드에 글자를 입력하면 입력된 글자가 화면에 보입니다. (onChanged)

Flutter에서는 이런 동작들을 각각의 이벤트로 구분하여 처리할 수 있습니다.

7. Flutter에서 이벤트 처리가 중요한 이유

1. 사용자 인터랙션:
앱은 사용자가 동작을 했을 때 반응해야 의미가 있습니다.
동작이 안되는 앱은 재미가 없죠.
버튼 클릭, 화면 터치, 글자 입력 등 모든 상호작용은 이벤트 처리를 통해 가능하다는 걸 알게 되었네요.

2. 앱의 동적 동작 구현:
버튼 클릭으로 화면을 이동하거나 데이터를 저장하는 등 앱의 핵심 동작을 구현할 수 있습니다.

8. 요약

간단해 보이는 내용이었는데 쓰다보니 길어졌네요. 자, 요약 !

• onPressed: 버튼 클릭 시 실행되는 이벤트 처리.
• onTap: 화면 터치 시 실행되는 이벤트 처리.
• onChanged: 입력 내용이 변경될 때 실행되는 이벤트 처리.

다양한 이벤트를 결합하면 더 재미있는 앱을 만들 수 있을 것 같네요. 그쵸?

궁금한 부분은 댓글로 알려주세요! 같이 공부해 봅시다.

오늘도 고생하셨습니다!
끝!