Overview.
이번에는 로그인 등에 필요한 TextFormField 위젯을 알아봅니다.
- TextFormField 이란?
- Form 예제 코드
- TextFormField 예제 코드
1. TextFormField 이란?
Form 위젯은 데이터 전송을 위해 여러 양식의 위젯을 함께 그룹화 해주는 컨테이너 위젯입니다.
사용자 입력을 받을 수 있는 여러 입력 요소들을 감싸서 한 번에 데이터를 전송하게 해주거나, 입력 요 소들의 유효성을 검사하는데 사용됩니다. 즉, Form 위젯 안에 TextFormField를 여러 개 추가하여 사용자 입력을 받고 입력 받은 데이터를 한 번에 전송할 수 있습니다
전체 디자인은 이렇습니다. ( 디자인 똥손..)
2. Form 예제 코드
TextFormField 를 모아놓은 클래스 입니다.
import 'package:class_login_app/components/custom_text_form_field.dart';
import 'package:class_login_app/size.dart';
import 'package:flutter/material.dart';
class CustomForm extends StatelessWidget {
final _formKey = GlobalKey<FormState>(); // 1. 글로벌 Key
CustomForm({super.key});
@override
Widget build(BuildContext context) {
return Form(
// 글로벌 key 를 Form 태그에 연결하여 해당 Key 로 Form 의 상태를 관리할 수 있음
key: _formKey,
child: Column(
children: [
CustomTextFormField('Email'),
SizedBox(
height: medium_gap,
),
CustomTextFormField('Password'),
SizedBox(
height: large_gap,
),
],
));
}
}
3. TextFormField 예제 코드
보니깐 기본적인 디자인 만드는 것만 주의하면 되겠네요!
import 'package:class_login_app/size.dart';
import 'package:flutter/material.dart';
class CustomTextFormField extends StatelessWidget {
final String text;
const CustomTextFormField(this.text, {super.key});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(text),
SizedBox(
height: small_gap,
),
TextFormField(
// validator : 이벤트 핸들러
// ! 는 null이 절대 아니다라는 것을 컴파일러에게 알려줍니다.
validator: (value) =>
value!.isEmpty ? "Please enter some text" : null,
// 해당 TextFormField 가 비밀번호 양식이면 **** 처리 해주기
obscureText: text == "Password" ? true : false,
// 데코레이션
decoration: InputDecoration(
hintText: 'Enter $text',
// 첫 화면시 기본 FormField 디자인
enabledBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
// 손가락 터치시 ... 디자인
focusedBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
// 애러 발생시 ... 디자인
errorBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
// 에러 발생 후 손가락 터치시 ... 디자인
focusedErrorBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(20.0)),
),
)
],
);
}
}
3. TextButton 예제 코드
글로벌 key 가 중요합니다.
이제 http 통신을 통해서 서버에 전송하시면 될것입니다.
이번에는 걍 화면 이동 처리 ㅋ..
import 'package:class_login_app/components/custom_text_form_field.dart';
import 'package:class_login_app/size.dart';
import 'package:flutter/material.dart';
class CustomForm extends StatelessWidget {
final _formKey = GlobalKey<FormState>(); // 1. 글로벌 Key
CustomForm({super.key});
@override
Widget build(BuildContext context) {
return Form(
// 글로벌 key 를 Form 태그에 연결하여 해당 Key 로 Form 의 상태를 관리할 수 있음
key: _formKey,
child: Column(
children: [
CustomTextFormField('Email'),
SizedBox(
height: medium_gap,
),
CustomTextFormField('Password'),
SizedBox(
height: large_gap,
),
TextButton(
onPressed: () {
// 사용자가 입력한 유효성 검사
if (_formKey.currentState!.validate()) {
// 즉, 오류가 없다면 화면 이동 처리
Navigator.pushNamed(context, "/home");
}
},
child: Text('Login'))
],
));
}
}
'flutter & dart' 카테고리의 다른 글
flutter & dart - StatefulWidget 과 StatelessWidget (2) | 2024.02.27 |
---|---|
flutter & dart - Navigator (0) | 2024.02.27 |
flutter & dart - 화면 이동을 위한 Routes (1) | 2024.02.26 |
flutter & dart - [Design] 중요한 디자인 구성요소에는 중요한 컬러를 적용 (0) | 2024.02.20 |
flutter & dart - null safety (0) | 2024.02.19 |