Flutter 사용자 입력 처리와 이벤트 동작

 

1. TextField 위젯 (사용자 입력 받기)

TextField는 사용자가 글자를 입력할 수 있는 상자입니다.
아래는 간단한 예제입니다:

TextField(
  decoration: InputDecoration(
    labelText: '이름을 입력하세요', // 상자 안에 표시될 텍스트
    border: OutlineInputBorder(), // 상자 테두리 추가
  ),
  onChanged: (value) {
    print('입력된 값: $value'); // 사용자가 입력할 때마다 값 출력
  },
)

쉽게 이해하기:

1. labelText: 입력 상자 위에 "이름을 입력하세요"라는 안내 문구가 표시됩니다.
2. onChanged: 사용자가 글자를 입력할 때마다 입력한 값이 출력됩니다.
3. TextField의 decoration은 입력 상자를 꾸미는 역할을 합니다. 주로 안내 텍스트, 테두리, 아이콘, 여백 등을 설정할 수 있습니다.

다양한 속성을 갖고 있죠.

TextField(
  decoration: InputDecoration(
    labelText: '아이디', // 입력 상자 위 안내문
    hintText: '아이디를 입력해주세요', // 상자 안 힌트
    border: OutlineInputBorder(), // 테두리 추가
    prefixIcon: Icon(Icons.person), // 입력 상자 앞에 아이콘 추가
    suffixIcon: Icon(Icons.check), // 입력 상자 뒤에 아이콘 추가
    filled: true, // 배경색 활성화
    fillColor: Colors.grey[200], // 배경색 설정
  ),
)

---

2. ElevatedButton과 TextField 연동 (입력 값 사용하기)

이제 TextField와 ElevatedButton을 조합해 봅시다.

• 사용자가 이름을 입력하고, 버튼을 눌렀을 때 입력 값을 출력하는 예제입니다.

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: InputExample(),
      ),
    );
  }
}

class InputExample extends StatefulWidget {
  @override
  _InputExampleState createState() => _InputExampleState();
}

class _InputExampleState extends State<InputExample> {
  String inputText = ''; // 입력 값을 저장할 변수

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0), // 화면 여백
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: '이름을 입력하세요',
              border: OutlineInputBorder(),
            ),
            onChanged: (value) {
              setState(() {
                inputText = value; // 입력 값을 변수에 저장
              });
            },
          ),
          SizedBox(height: 20), // 간격 추가
          ElevatedButton(
            onPressed: () {
              print('입력된 이름: $inputText');
            },
            child: Text('확인'),
          ),
        ],
      ),
    );
  }
}

쉽게 이해하기:

1. TextField: 사용자가 이름을 입력합니다.
2. onChanged: 입력 값이 변경될 때마다 inputText 변수에 저장됩니다.
3. ElevatedButton: 버튼을 누르면 inputText에 저장된 값이 출력됩니다.

 

자세하게 이해하기:

이 Flutter 코드의 동작과 구성을 초보자가 이해하기 쉽게 단계별로 설명하겠습니다.

1. 전체 앱 구조

• MyApp은 앱의 시작점입니다. main 에서 호출했죠? ㅇㅋ
  • MaterialApp: Flutter에서 앱을 만드는 기본 틀입니다.
  • home: 앱의 첫 화면을 지정합니다. 여기서는 Scaffold를 사용했습니다.

2. Scaffold 구성

• Scaffold: 화면을 구성하는 기본적인 틀입니다. 뼈대죠!
  • appBar: 화면 상단의 제목 부분입니다. 나중엔 자주 삭제하게 되는 것 같아요.
    • title: Text('사용자 입력 예제'): "사용자 입력 예제"라는 제목이 표시됩니다.
  • body: 앱의 주요 내용이 들어가는 부분입니다.
    • InputExample 위젯이 표시됩니다. 이 위젯은 제가 임의로 만든거죠. 제공되는 위젯 아님.

---

InputExample 위젯 설명

1. StatefulWidget 사용

• InputExample은 StatefulWidget !! 
  • 화면에서 사용자 입력 값을 받아서 변화가 있을 때 새로 그리기 위해 사용됩니다.
  • StatefulWidget은 상태를 저장하고, setState()로 상태가 변경되면 화면을 업데이트합니다. setState 는 중요합니다. 빼먹지 맙시다..

---

InputExample 내부 동작

1. 변수 선언

String inputText = ''; // 입력 값을 저장할 변수

• 사용자가 입력한 내용을 저장하는 변수입니다.
• 초기에 빈 문자열로 설정되어 있습니다.

---

2. Padding 위젯

Padding(
  padding: EdgeInsets.all(16.0), // 화면 여백 설정
  child: ...
)

• 화면 양쪽에 여백을 추가합니다.
  • EdgeInsets.all(16.0): 모든 방향(위, 아래, 왼쪽, 오른쪽)에 16픽셀의 여백을 줍니다.

---

3. Column 위젯

Column(
  mainAxisAlignment: MainAxisAlignment.center, // 세로로 가운데 정렬
  children: [
    ...
  ],
)

• 화면을 세로로 구성하기 위해 Column 위젯을 사용합니다.
• mainAxisAlignment: MainAxisAlignment.center
  • 위젯들을 화면의 세로 가운데에 정렬합니다.
• children: Column 안에 들어갈 위젯들을 나열합니다.

---

4. TextField (사용자 입력 상자)

TextField(
  decoration: InputDecoration(
    labelText: '이름을 입력하세요', // 입력 상자 위 안내문
    border: OutlineInputBorder(), // 테두리 추가
  ),
  onChanged: (value) {
    setState(() {
      inputText = value; // 입력된 값을 변수에 저장
    });
  },
)

• TextField는 사용자가 글자를 입력할 수 있는 상자입니다.
• decoration: 입력 상자를 꾸미는 설정입니다. 위에서 설명했쥬?
  • labelText: 입력 상자 위에 "이름을 입력하세요"라는 안내문을 표시합니다.
  • border: 입력 상자에 테두리를 추가합니다.
• onChanged:
  • 사용자가 글자를 입력할 때마다 호출됩니다. 이거 좋습니다! 
  • 입력된 값을 inputText 변수에 저장합니다.
  • setState(): 화면을 다시 그려서 inputText의 최신 값을 반영합니다.

---

5. SizedBox (간격 추가)

SizedBox(height: 20)

• 위젯들 사이에 20픽셀 간격을 추가합니다.
• 간단한 예: TextField와 버튼 사이에 여백을 만들어 줍니다.

---

6. ElevatedButton (클릭 가능한 버튼)

ElevatedButton(
  onPressed: () {
    print('입력된 이름: $inputText');
  },
  child: Text('확인'),
)

• 사용자가 클릭할 수 있는 버튼입니다.
• onPressed: 버튼이 눌렸을 때 실행될 동작을 정의합니다.
  • 여기서는 print()를 사용해 입력된 이름을 출력합니다.
  • 예: 사용자가 "홍길동"을 입력하면, 터미널에 입력된 이름: 홍길동이 표시됩니다.
• child: 버튼에 표시될 내용을 정의합니다.
  • 여기서는 "확인"이라는 텍스트가 버튼 안에 표시됩니다.

---

전체 흐름

1. 앱 실행 시, 화면에는 입력 상자(TextField)와 확인 버튼(ElevatedButton)이 세로로 나란히 표시됩니다.
2. 사용자가 이름을 입력하면:
   • 입력된 내용이 onChanged를 통해 inputText 변수에 저장됩니다.
3. 사용자가 "확인" 버튼을 누르면:
   • 버튼의 onPressed 이벤트가 실행됩니다.
   • 입력된 이름이 터미널에 출력됩니다.

---

화면 구성 요약

1. 상단에 제목: "사용자 입력 예제"
2. 가운데에 입력 상자: 이름을 입력할 수 있음
3. 그 아래에 확인 버튼: 버튼 클릭 시 입력된 이름 출력

---

 

 

 

---

3. 이벤트로 화면에 출력하기

이제 입력 값을 터미널이 아닌 화면에 표시해 보겠습니다.

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: InputDisplayExample(),
      ),
    );
  }
}

class InputDisplayExample extends StatefulWidget {
  @override
  _InputDisplayExampleState createState() => _InputDisplayExampleState();
}

class _InputDisplayExampleState extends State<InputDisplayExample> {
  String inputText = ''; // 입력 값을 저장할 변수

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: '메시지를 입력하세요',
              border: OutlineInputBorder(),
            ),
            onChanged: (value) {
              setState(() {
                inputText = value; // 입력 값을 변수에 저장
              });
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                // 버튼을 눌렀을 때만 화면에 값을 출력
              });
            },
            child: Text('화면에 출력'),
          ),
          SizedBox(height: 20),
          Text(
            '입력된 메시지: $inputText',
            style: TextStyle(fontSize: 18, color: Colors.blue),
          ),
        ],
      ),
    );
  }
}

쉽게 이해하기:

1. TextField: 입력 상자에서 글자를 입력합니다.
2. Text 위젯: 입력된 메시지를 화면에 보여줍니다.
3. ElevatedButton: 버튼을 눌렀을 때 값이 화면에 즉시 반영됩니다.

---

4. 주요 개념 요약

• TextField: 사용자 입력을 받을 수 있는 상자
• onChanged: 사용자가 글자를 입력할 때 호출되는 함수
• setState: 화면을 다시 그리도록 요청하는 함수
• ElevatedButton: 클릭 이벤트를 처리하는 버튼

---

5. 다음 학습 내용

다음 단계에서는 조건문을 활용한 입력 값 검증과 간단한 폼 만들기를 공부해 보겠습니다.

 

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