일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- Linux 디렉터리 구조
- Linux apt
- EC2 HTTP 호스팅
- EC2 Apache2
- HTTP Web Server
- 서버의 서비스 방식
- arbitrum sepolia eth
- EC2 zsh
- javascript scope
- ec2 ssh unprotected private key file
- linux foreground
- AWS EC2 서버 만들기
- 아비트럼 새폴리아 이더 받는법
- git 계정 설정
- Navigation Pattern
- git branch
- javascript 정렬
- linux background
- nginx https 설정
- ssl 인증서 발급받기
- Git 브랜치
- git switch
- EC2 oh my zsh
- Linux apt-get
- Linux 디렉터리 역할
- Logback
- Linux oh my zsh
- git 기본 에디터
- UNPROTECTED PRIVATE KEY FILE
- GIT
- Today
- Total
HyunJun 기술 블로그
TextField, TextFormField, Form 본문
Flutter에서의 사용자 입력받기.
Flutter에서 사용자가 직접 입력한 텍스트를 받고 유효성 검사 등을 하기 위해서 TextField, TextFormField, Form 등이 사용된다.
1) TextField
Flutter에서 name, id, email, pw 등 사용자의 입력을 받기 위해 사용한다. TextField 위젯은 단순히 텍스트를 입력을 받기 위한 위젯으로, 폼 처리나 유효성 검사를 위한 기능을 내장하고 있지 않다. 하여 Form 위젯 안에 위치할 필요가 없고 단독으로 사용 가능하다.
- controller: 사용자가 TextField에 입력한 값을 저장하고 재 사용 및 관리하기 위해 TextEditingController를 사용한다.
- decoration: TextField의 외관을 설정할 수 있는 InputDecoration. (선택사항)
- enabled: 입력 필드의 활성화 여부를 결정하는 bool 값. (기본값: true)
- autofocus: 위젯이 화면에 나타날 때 자동으로 포커스를 받을지 여부를 결정하는 bool 값. (기본값: false)
- keyboardType: 입력 필드에 표시할 키보드 유형을 결정하는 TextInputType 값. (기본값: TextInputType.text)
- inputFormatters: 입력 필드에 적용할 텍스트 포맷터 리스트. (선택사항)
- onChanged: 입력 필드의 텍스트가 변경될 때 호출되는 콜백 함수. (선택사항)
- onEditingComplete: 사용자가 편집을 완료했을 때 호출되는 콜백 함수. (선택사항)
- onSubmitted: 사용자가 엔터 키를 눌렀을 때 호출되는 콜백 함수. (선택사항)
- maxLength: 입력 가능한 최대 문자 길이를 제한하는 int 값. (선택사항)
- maxLines: 입력 필드의 최대 행 수를 결정하는 int 값. (기본값: 1)
- minLines: 입력 필드의 최소 행 수를 결정하는 int 값. (기본값: 1)
- obscureText: 비밀번호와 같이 텍스트를 가려서 표시할지 여부를 결정하는 bool 값. (기본값: false)
- textAlign: 텍스트의 정렬 방향을 결정하는 TextAlign 값. (기본값: TextAlign.start)
- textCapitalization: 입력된 텍스트의 대문자 변환 방식을 결정하는 TextCapitalization 값. (기본값: TextCapitalization.none)
StatefulWidget으로 기본 위젯을 만든다.
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}
TextField에 입력한 값을 관리하기 위해 TextEditingController를 선언한다.
class _HomeScreenState extends State<HomeScreen> {
TextEditingController _idController = TextEditingController();
TextEditingController _pwController = TextEditingController();
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}
build 메서드를 아래와 같이 수정한다. TextField에 controller를 지정해 주고, obscureText를 통해 입력값을 점으로 표시한다.(비밀번호 입력) Submit 버튼 클릭 시 컨트롤러를 통해 해당 TextField의 Text를 가지고 와 보여준다.
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
TextField(
controller: _idController,
decoration: InputDecoration(labelText: "id 입력"),
),
TextField(
obscureText: true,
controller: _pwController,
decoration: InputDecoration(labelText: "pw 입력"),
),
ElevatedButton(
onPressed: () {
String id = _idController.text;
String pw = _pwController.text;
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("id: ${id} \npw: ${pw}"),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'))
],
);
},
);
},
child: Text("Submit"))
],
),
),
);
}
2) onSubmitted, onEditingComplete
기본적으로 onSubmitted와 onEditingComplete는 해당 TextField에서 모바일 키보드에서 done 등을 터치하면 동작한다. 즉 해당 텍스트 필드에 대해서 입력이 완료되었을 때 동작한다는 개념은 같다. 이때 기본적으로 텍스트 필드 입력 완료 후의 기본 동작은 해당 TextField에서 focus를 잃고 모바일 키보드가 내려가게 된다.(기본 done 동작)
이때 onEditingComplete를 선언해 주게 되면 기본 TextField done 동작과는 다르게 focus를 유지하며, done 동작 후에도 키보드를 유지할 수 있다. 즉, onEditingComplete 시 포커스를 잃고, 키보드가 내려가는 기본값을 없애는 것이다.
onEditingComplete: (){
print("onEditingComplete");
},
3) Form과 TextFormField
폼을 설정하고, 유효성 검증을 쉽게 하고, TextField보다 여러 가지 확장된 기능을 사용하려면 Form과 TextFormFeild 위젯을 사용해야 한다.
- Form의 상태를 관리하는 GlobalKey<FormState>를 선언하고 Form에 등록하여 사용할 수 있다.
- 각각의 TextFormField에서 validator를 활용해서 입력값 value에 대한 유효성 검사를 진행할 수 있다.
- 이때 유효성 검증에 실패하면 해당 return "", String 값이 빨간 글자로 띄워주게 되며,
- return 값이 null인 경우를 유효성 검증에 통과했다고 본다.
- .currentState!.validate()를 통해 Form 내에 있는 TextFormField 들의 유효성 검증이 통과했는지를 true, false로 넘겨받는다.
- .currentState!.save();를 사용하게 되면, 각각의 TextFormField에 있는 onSaved가 동작하게 된다.
즉, 각각의 입력값에 대한 유효성 검증 통과 시 -> 각각의 입력값에 대한 onSaved 콜백 함수를 실행할 수 있는 것이다.
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final _formKey = GlobalKey<FormState>(); // GlobalKey for Form
String _idValue = "";
String _pwValue = "";
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Form(
key: _formKey, // Assign the GlobalKey to Form
child: Column(
children: [
TextFormField(
decoration: InputDecoration(labelText: "id 입력", hintText: "id"),
validator: (value) {
if (value!.isEmpty) {
return '아이디를 입력해주세요.';
}
return null;
},
onSaved: (value) {
_idValue = value!;
},
),
TextFormField(
obscureText: true,
decoration: InputDecoration(labelText: "pw 입력", hintText: "pw"),
validator: (value) {
if (value!.isEmpty) {
return '비밀번호를 입력해주세요.';
}
return null;
},
onSaved: (value) {
_pwValue = value!;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("id: ${_idValue} \npw: ${_pwValue}"),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
}
},
child: Text("Submit"),
),
],
),
),
),
);
}
}
그 외에, CupertinoTextField, Slider, Switch, Radio, DropdownButton, DatePicker, TimePicker, Checkbox 등을 활용하여 여러 가지 종류의 입력값을 받을 수 있다.