앱을 만들다 보면 사용자의 입력을 받아야 하는 순간이 꼭 찾아옵니다.
회원가입, 검색창, 메모 작성 등 대부분의 기능은 **텍스트 입력 필드(TextField)**와 **버튼(Button)**으로 시작되죠.
이번 글에서는 Flutter에서 입력을 받고 처리하는 방법,
즉 TextField, ElevatedButton, TextEditingController의 사용법을 함께 배워보겠습니다.
✍️ TextField란?
TextField는 Flutter에서 사용자로부터 텍스트를 입력받을 수 있는 위젯입니다.
✅ 기본 사용 예시
TextField()
이렇게만 해도 텍스트 입력란이 만들어지지만,
입력값을 저장하거나 버튼 클릭 시 활용하려면 Controller를 사용해야 해요.
🎮 TextEditingController 사용법
TextEditingController는 입력된 내용을 코드에서 가져오거나 변경할 수 있게 해줍니다.
final myController = TextEditingController();
그리고 TextField에 연결해줍니다:
TextField(
controller: myController,
)
controller: myController,
)
🧪 실습 예제 – 입력받고 버튼으로 출력하기
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final TextEditingController myController = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('사용자 입력 받기')),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: myController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '이름을 입력하세요',
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
String name = myController.text;
showDialog(
context: context,
builder: (_) => AlertDialog(
content: Text('안녕하세요, $name 님!'),
),
);
},
child: Text('인사하기'),
),
],
),
),
),
);
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final TextEditingController myController = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('사용자 입력 받기')),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: myController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '이름을 입력하세요',
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
String name = myController.text;
showDialog(
context: context,
builder: (_) => AlertDialog(
content: Text('안녕하세요, $name 님!'),
),
);
},
child: Text('인사하기'),
),
],
),
),
),
);
}
}
🔍 코드 설명
요소설명
| TextEditingController | 입력값을 저장/사용하는 컨트롤러 |
| TextField | 사용자 입력을 받는 UI |
| ElevatedButton | 버튼 클릭 이벤트 발생 |
| showDialog | 팝업창 표시 |
✅ 입력한 값을 버튼 클릭 시 팝업으로 보여주는 구조입니다.
💡 추가 기능들
📌 입력값 초기화
myController.clear();
📌 키보드 유형 지정 (예: 숫자 키패드)
keyboardType: TextInputType.number,
📌 비밀번호 입력 처리
obscureText: true,
Flutter에서는 다양한 속성으로 입력 폼 UX를 자유롭게 커스터마이징할 수 있습니다.
🧠 마무리 요약
개념설명
| TextField | 사용자 입력 위젯 |
| TextEditingController | 입력값을 제어하는 도구 |
| ElevatedButton | 사용자 액션 트리거 버튼 |
| showDialog | 알림창, 팝업 처리 가능 |
이제 여러분은 입력받기 → 처리하기 → 결과 보여주기 흐름을 완벽히 구현할 수 있어요.