Flutter로 간단한 버튼 만들기｜onPressed부터 이벤트 처리까지 쉽게 배우기

 
Flutter 앱을 만들 때 가장 먼저 접하는 위젯 중 하나가 바로 버튼(Button) 입니다.
버튼은 사용자와의 상호작용을 만드는 가장 기본적인 UI 요소죠.
이번 글에서는 Flutter에서 버튼을 어떻게 만들고,
onPressed 이벤트를 처리하는 방법까지 간단하게 정리해드릴게요.
 

---

 

✅ 1. ElevatedButton 기본 사용법

Flutter에서 가장 기본적인 버튼 위젯은 ElevatedButton입니다.
(예전 RaisedButton은 이제 Deprecated 되었어요)
 

ElevatedButton(
  onPressed: () {
    print('버튼이 눌렸어요!');
  },
  child: Text('눌러보세요'),
)

 

• onPressed는 버튼이 눌렸을 때 실행할 코드를 넣는 부분입니다.
• child에는 텍스트, 아이콘, 위젯 등 버튼 안에 들어갈 내용을 설정할 수 있어요.

---

✅ 2. 버튼에 함수 연결하기

이벤트 처리 코드를 함수로 따로 분리할 수도 있어요.

void _handleClick() {
  print('버튼 클릭 처리됨');
}

@override
Widget build(BuildContext context) {
  return ElevatedButton(
    onPressed: _handleClick,
    child: Text('함수 연결 버튼'),
  );
}

 

• 가독성도 좋아지고 코드 재사용도 쉬워지죠.

---

✅ 3. 버튼 상태에 따라 비활성화 하기

onPressed에 null을 주면 버튼이 비활성화됩니다.

ElevatedButton(
  onPressed: null,
  child: Text('비활성화된 버튼'),
)

---

✅ 4. 버튼 스타일 커스터마이징

버튼의 색상, 패딩, 모양 등을 바꾸려면 style 속성을 사용합니다.

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  child: Text('스타일 버튼'),
)

---

✅ 5. 버튼 클릭 시 화면에 텍스트 변경하기 (Stateful)

버튼을 눌렀을 때 UI가 변하게 만들려면 StatefulWidget이 필요해요.

class MyButtonExample extends StatefulWidget {
  @override
  _MyButtonExampleState createState() => _MyButtonExampleState();
}

class _MyButtonExampleState extends State<MyButtonExample> {
  String message = '아직 눌리지 않았어요';

  void _changeMessage() {
    setState(() {
      message = '버튼이 눌렸어요!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(message),
        ElevatedButton(
          onPressed: _changeMessage,
          child: Text('눌러보세요'),
        ),
      ],
    );
  }
}

---

📝 마무리

버튼 하나로도 다양한 동작을 만들 수 있다는 게 Flutter의 매력입니다.
오늘은 가장 기본적인 ElevatedButton을 활용해
이벤트 처리까지 쉽게 익혀봤어요.
다음 글에서는 버튼 외에도 입력 필드(TextField), 토글(Switch) 등
다양한 위젯들을 다뤄볼 예정입니다 😊