아토믹데브_13_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

13강: 버튼과 클릭 이벤트 처리

---

내용 요약

1. Flutter에서 버튼 생성 및 클릭 이벤트 처리 방법:
   • Flutter에서 버튼은 사용자의 상호작용을 처리하는 중요한 UI 요소입니다. 다양한 버튼 위젯이 있으며, 각 버튼은 고유한 스타일과 기능을 제공합니다.
   • 버튼 클릭 시 특정 동작을 수행하도록 설정할 수 있으며, 이를 위해 onPressed 콜백 함수를 사용합니다. 사용자가 버튼을 클릭하면 onPressed에 정의된 함수가 실행됩니다.
2. 다양한 종류의 버튼 사용법:
   • ElevatedButton: 일반적인 버튼으로, 눌렀을 때 높이감이 있는 효과를 줍니다.
   • TextButton: 텍스트로만 이루어진 버튼으로, 클릭 가능한 링크처럼 보입니다.
   • OutlinedButton: 외곽선만 있는 버튼으로, 텍스트 버튼과 유사하지만 테두리가 있습니다.
   • IconButton: 아이콘으로 이루어진 버튼으로, 주로 툴바나 앱 바에서 사용됩니다.

---

실습

1. 버튼 클릭 시 UI 변화 및 이벤트 처리

• Flutter 프로젝트 설정:
  • 기존 Flutter 프로젝트를 사용하거나 새로운 프로젝트를 생성합니다.
  • lib/main.dart 파일을 열어 다양한 버튼을 생성하고, 클릭 이벤트를 처리하는 예제를 작성합니다.
• 버튼 예제 코드:
  • 다음 코드를 사용하여 여러 종류의 버튼을 생성하고 클릭 이벤트를 처리합니다:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: const Text('Button and Click Event Example'),
            ),
            body: const ButtonExample(),
          ),
        );
      }
    }
    
    class ButtonExample extends StatefulWidget {
      const ButtonExample({super.key});
    
      @override
      _ButtonExampleState createState() => _ButtonExampleState();
    }
    
    class _ButtonExampleState extends State<ButtonExample> {
      String _displayText = 'Click any button';
    
      void _onButtonPressed(String newText) {
        setState(() {
          _displayText = newText;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                _displayText,
                style: const TextStyle(fontSize: 24),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => _onButtonPressed('ElevatedButton Clicked'),
                child: const Text('Elevated Button'),
              ),
              const SizedBox(height: 10),
              TextButton(
                onPressed: () => _onButtonPressed('TextButton Clicked'),
                child: const Text('Text Button'),
              ),
              const SizedBox(height: 10),
              Outlined

     
  • 코드 설명:
    • ElevatedButton: 기본 버튼으로, 클릭 시 "ElevatedButton Clicked"라는 메시지를 화면에 표시합니다.
    • TextButton: 텍스트로만 이루어진 버튼으로, 클릭 시 "TextButton Clicked"라는 메시지를 표시합니다.
    • OutlinedButton: 외곽선이 있는 버튼으로, 클릭 시 "OutlinedButton Clicked"라는 메시지를 표시합니다.
    • IconButton: 아이콘으로 이루어진 버튼으로, 클릭 시 "IconButton Clicked"라는 메시지를 표시합니다.
    • _onButtonPressed 함수: 버튼 클릭 시 호출되며, 전달된 텍스트로 _displayText 상태를 업데이트합니다. 업데이트된 텍스트는 화면에 표시됩니다.

2. 프로젝트 실행 및 UI 확인

• Flutter 프로젝트 실행:
  • 터미널에서 다음 명령어를 실행하여 Flutter 애플리케이션을 실행합니다:

    flutter run

  • 에뮬레이터 또는 실제 디바이스에서 앱이 실행되며, 다양한 버튼이 화면에 표시됩니다. 각 버튼을 클릭하면 화면에 해당 메시지가 나타납니다.
• UI 조정 및 테스트:
  • 각 버튼의 스타일이나 텍스트를 변경하고, 클릭 이벤트에 따라 다른 동작을 추가해보세요. 예를 들어, 클릭 시 색상을 변경하거나, 애니메이션을 추가할 수 있습니다.

---

스크린샷

1. 버튼 예제 코드:
   • 위에서 작성한 Dart 코드의 스크린샷을 제공합니다. 코드 편집기(예: Visual Studio Code)에서의 작성 화면을 포함합니다.
2. 클릭 이벤트 처리 화면:
   • 에뮬레이터 또는 실제 디바이스에서 실행된 Flutter 앱의 화면을 캡처합니다. 각 버튼 클릭 시 UI에 표시되는 메시지가 포함된 화면을 보여줍니다.

---

이 강의를 통해 여러분은 Flutter에서 다양한 종류의 버튼을 생성하고, 클릭 이벤트를 처리하는 방법을 학습했습니다. 이러한 버튼을 활용하면 사용자와의 상호작용을 처리할 수 있으며, 이를 통해 더 나은 사용자 경험을 제공할 수 있습니다. 앞으로의 강의에서는 이러한 버튼을 더욱 복잡한 UI와 결합하여 활용해 보겠습니다.