Flutter 버튼 쉽게 배우기: 클릭으로 시작하는 앱 개발 (ElevatedButton, StatefulWidget 예제)

 
안녕하세요! 스테디빌더입니다. 😊

오늘은 Flutter에서 버튼을 만들고
버튼을 클릭하면 뭔가 동작되도록 만들어 볼게요.

이제 막 앱 개발에 뛰어드셨더라도
따라오실 수 있도록 최대한 쉽게 설명할게요!

 

버튼 !

목차:

1. 버튼의 종류와 특징
2. 클릭 이벤트 추가하기
3. 버튼 클릭으로 화면 바꾸기 (setState)
4. 정리

 

 

1. 버튼의 종류와 특징

Flutter에는 다양한 버튼 위젯이 있습니다.
앱의 디자인과 기능에 따라 적절한 버튼을 선택할 수 있어요.
 
flutter 공식 문서 페이지(https://docs.flutter.dev/ui/widgets/material)로 놀러 가보시면,
기본적으로 제공되는 다양한 버튼들을 구경할 수 있습니다 : )
 
<공식 문서의 다양한 버튼 소개>
 

 
 
 

대표적인 버튼 종류:

1. ElevatedButton: 기본적인 입체감 있는 버튼 (가장 많이 사용됩니다).
2. TextButton: 단순 텍스트로 된 버튼 (텍스트만 필요할 때 적합).
3. OutlinedButton: 테두리가 있는 깔끔한 버튼 (강조하거나 구분할 때 사용).

 
https://pub.dev 에서 대표적인 버튼 클래스의 내용도 확인할 수 있어요.
( ElevatedButton class - material library - Dart API )

ElevatedButton class - material library - Dart API

 

버튼 모양은 기본적으로 제공되니
크게 신경 쓰지 않아도 됩니다.
설명은 됐고 , 그럼 이제 돌려 볼까요?

 

 

 

2. 클릭 이벤트 추가하기

버튼을 누르면 뭔가 실행되도록 만들어 보겠습니다.

실행 가능한 코드:

import 'package:flutter/material.dart';

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

class ButtonExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('버튼 예제')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('버튼 클릭!');
            },
            child: Text('클릭하세요'),
          ),
        ),
      ),
    );
  }
}

코드 설명:

• ElevatedButton: 기본적인 버튼 위젯입니다.
• onPressed: 버튼을 클릭했을 때 실행되는 동작을 정의합니다.
• 여기서는 print를 사용해 콘솔에 메시지를 출력합니다.

 

기본 버튼 결과

로그를 남기는 기본 버튼

버튼을 클릭(onPressed)할 때마다 ‘DEBUG CONSOLE’ 에 로그가 잘 남네요(print) !

 

 

3. 버튼 클릭으로 화면 바꾸기 (setState)

버튼 클릭 시 화면의 텍스트가 바뀌도록 만들어 보겠습니다.
혹시 StatefulWidget 에 대한 설명이 필요하시다면 아래 글을 참고해 주세요. 😊
Flutter로 더 깊이 들어가기: 첫 앱에서 한 단계 더!

Flutter로 더 깊이 들어가기: 첫 앱에서 한 단계 더!

 

 

실행 가능한 코드:

import 'package:flutter/material.dart';

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

class UpdateScreenApp extends StatefulWidget {
  @override
  _UpdateScreenAppState createState() => _UpdateScreenAppState();
}

class _UpdateScreenAppState extends State<UpdateScreenApp> {
  String message = 'Hello, Flutter!';

  void updateMessage() {
    setState(() {
      message = '버튼을 클릭했습니다!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('화면 업데이트 예제')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                message,
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: updateMessage,
                child: Text('눌러보세요'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

코드 설명:

• setState: Flutter에서 화면을 업데이트하는 기본 메서드입니다.
• message: 버튼을 클릭하면 텍스트가 업데이트됩니다.
• Column: 텍스트와 버튼을 세로로 정렬하는 데 사용했습니다.

 

코드 읽기

(1) String message = 'Hello, Flutter!'; 기본 메세지 값은 이렇게 설정했죠.
(2) Text ( message, style... ) 이 코드로 인해 화면에서는 "Hello, Flutter!" 가 먼저 보여지게 됩니다.
(3) 화면 안에는 ElevatedButton ( ) 클래스로 인해서 버튼도 보여지게 되죠 :)
(4) ElevatedButton ( ) 버튼 안에는 onPressed 속성이 있어서, 클릭했을 때 updateMessage 를 동작시키도록 했어요.
(5) updateMessage ( ) 안에는 setState ( ) 가 있죠.
(6) setState ( ) 에서는 메세지의 내용을 바꿨어요. message = '버튼을 클릭했습니다!'; 이렇게요.
 
 

화면 바꾸는 버튼 결과

화면의 Text를 변경하는 버튼

버튼을 클릭하면 화면 안의 텍스트가 바로 바뀌네요. 구우우웃~~~!

 

정리

1. Flutter에서는 다양한 버튼을 제공하며, 가장 기본적인 버튼은 ElevatedButton입니다.
2. 버튼의 onPressed 속성을 사용해서 클릭했을 때 무언가 동작시킬 수 있었어요.
3. setState를 통해 버튼 클릭 시 화면을 실시간으로 업데이트할 수 있었네요.

 
버튼을 누를 수 있게 띄워 봤고,
또 버튼을 눌렀을 때 화면에 실시간으로 반영되는 걸 해보셨네요 !
Flutter 버튼의 기본 사용법을 마스터 하셨습니다 !!!  짝짝짝~!
 
화면이 다른 쪽으로 이동되지 않고 바로 반영되는 거 , 신기하지 않나요 ? 저만 그런가요 ? (신기하다고 해주세요... ㅠ) 역시 앱은 뭔가 동작해야 재미있네요. (ㅎ)
 
<버튼이 좋은 스테디빌더>

 
 
다음에는 더 실용적인 예제로 찾아올게요! 😊

고생하셨습니다 !
 
끝 !