폼과 입력 처리 - 텍스트 필드와 폼 제출
반응형
이번 강의에서는 Flutter에서 폼과 입력을 처리하는 방법을 배워보겠습니다. 사용자로부터 데이터를 입력받고 이를 처리하는 것은 애플리케이션 개발에서 매우 중요한 부분입니다. 이 강의에서는 텍스트 필드를 사용하여 입력을 받고, 폼을 구성하여 데이터를 제출하는 방법을 다룹니다.
텍스트 필드 사용하기
텍스트 필드는 사용자로부터 텍스트 입력을 받을 수 있는 기본 위젯입니다.
기본 텍스트 필드
import 'package:flutter/material.dart';
void main() {
runApp(TextFieldExampleApp());
}
class TextFieldExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('텍스트 필드 예제'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '이름',
),
),
),
),
);
}
}텍스트 필드의 주요 속성
- decoration: 텍스트 필드의 외관을 꾸미는 속성으로, InputDecoration을 사용하여 힌트 텍스트, 라벨, 아이콘 등을 추가할 수 있습니다.
- onChanged: 사용자가 텍스트 필드에 입력할 때마다 호출되는 콜백 함수입니다.
- controller: 텍스트 필드의 값을 제어하고 관리할 수 있는 TextEditingController를 사용합니다.
텍스트 필드와 컨트롤러 사용하기
텍스트 필드의 값을 실시간으로 읽거나 초기값을 설정하려면 TextEditingController를 사용합니다.
import 'package:flutter/material.dart';
void main() {
runApp(TextFieldControllerExampleApp());
}
class TextFieldControllerExampleApp extends StatelessWidget {
final TextEditingController _controller = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('텍스트 필드 컨트롤러 예제'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
TextField(
controller: _controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '이름',
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
print('입력된 이름: ${_controller.text}');
},
child: Text('입력된 값 출력'),
),
],
),
),
),
);
}
}폼과 폼 제출 처리
여러 개의 입력 필드를 포함하는 폼을 구성하고, 폼 데이터를 검증하고 제출하는 방법을 알아보겠습니다.
폼 위젯 사용하기
폼은 여러 입력 필드를 그룹화하고, 데이터를 검증하고 제출할 수 있도록 하는 위젯입니다.
import 'package:flutter/material.dart';
void main() {
runApp(FormExampleApp());
}
class FormExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('폼 예제'),
),
body: FormExample(),
),
);
}
}
class FormExample extends StatefulWidget {
@override
_FormExampleState createState() => _FormExampleState();
}
class _FormExampleState extends State<FormExample> {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
controller: _nameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '이름',
),
validator: (value) {
if (value == null || value.isEmpty) {
return '이름을 입력하세요';
}
return null;
},
),
SizedBox(height: 20),
TextFormField(
controller: _emailController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '이메일',
),
validator: (value) {
if (value == null || value.isEmpty) {
return '이메일을 입력하세요';
} else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return '유효한 이메일 주소를 입력하세요';
}
return null;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// 폼이 유효할 때 실행되는 코드
print('이름: ${_nameController.text}');
print('이메일: ${_emailController.text}');
}
},
child: Text('제출'),
),
],
),
),
);
}
}코드 설명
- GlobalKey<FormState>: 폼의 상태를 추적하고 관리하기 위해 사용합니다.
- Form: 폼 위젯을 생성하여 여러 입력 필드를 그룹화합니다.
- TextFormField: 폼 내에서 사용되는 입력 필드로, validator 속성을 통해 입력값을 검증할 수 있습니다.
- validator: 입력값을 검증하는 함수로, 유효하지 않은 입력값일 경우 오류 메시지를 반환합니다.
- ElevatedButton: 폼을 제출하는 버튼으로, onPressed 콜백 함수에서 폼의 유효성을 검사하고 데이터를 처리합니다.
실습: 로그인 폼 만들기
이번 실습에서는 간단한 로그인 폼을 만들어보겠습니다. 사용자로부터 이메일과 비밀번호를 입력받고, 이를 검증하여 로그인 처리를 하는 폼을 구현합니다.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(LoginFormApp());
}
class LoginFormApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('로그인 폼'),
),
body: LoginForm(),
),
);
}
}
class LoginForm extends StatefulWidget {
@override
_LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
controller: _emailController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '이메일',
),
validator: (value) {
if (value == null || value.isEmpty) {
return '이메일을 입력하세요';
} else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
return '유효한 이메일 주소를 입력하세요';
}
return null;
},
),
SizedBox(height: 20),
TextFormField(
controller: _passwordController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: '비밀번호',
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return '비밀번호를 입력하세요';
} else if (value.length < 6) {
return '비밀번호는 최소 6자 이상이어야 합니다';
}
return null;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// 폼이 유효할 때 실행되는 코드
print('이메일: ${_emailController.text}');
print('비밀번호: ${_passwordController.text}');
}
},
child: Text('로그인'),
),
],
),
),
);
}
}코드 설명
- TextFormField: 이메일과 비밀번호 입력 필드를 생성합니다.
- validator: 입력값을 검증하여 폼의 유효성을 검사합니다.
- obscureText: 비밀번호 입력 필드의 텍스트를 숨깁니다.
결론
이번 강의를 통해 Flutter에서 폼과 입력을 처리하는 방법을 배웠습니다. 텍스트 필드를 사용하여 입력을 받고, 폼을 구성하여 데이터를 검증하고 제출하는 방법을 익혔습니다. 실습을 통해 간단한 로그인 폼을 만들어보며 실제로 어떻게 적용되는지 확인해보았습니다. 다음 강의에서는 Flutter의 상태 관리를 다루겠습니다. 사용자 입력과 폼 처리를 자신감 있게 다루게 될 것입니다.
반응형
댓글