입력값 출력하기 (TextEditingController, addListener)
- TextEditingController : 입력값 출력하는 클래스
- addListener : TextField위젯의 값이 변경될 때마다 무언가를 수행함
폼의 입력값 검증하기 (Form, GlobalKey<FormState>, TextFormField)
- 입력값을 받기 위해 사용 -> Form, TextFormField
- Form 을 검증하기 위해 -> 폼의 상태를 얻기 위한 key가 필요함 -> GlobalKey<FormState>()를 이용해 key를 구함 ->
Form의 key 프로퍼티에 할당 - TextFormField : validator 프로퍼티를 활용하여 검증 기능 제공,
검증할 내용 전체를 Form 위젯으로 감싸야함 (Form 위젯에는 유니크한 키를 지정해야함)- currentState.validate() 를 사용하여 ->Form내부의 모든 자식들의 validator가 실행됨
- SnackBar : 하단에 메시지를 표시
더보기
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "폼 입력값 검증",
home: Scaffold(
appBar: AppBar(
title: Text('폼 검증 데모'),
),
body: MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
// Form 위젯에 유니크한 키값을 부여하고 검증시 사용하기
final _formKey = GlobalKey<FormState>();
@override
void initState(){
super.initState();
}
@override
void dispose(){
super.dispose();
}
@override
Widget build(BuildContext context) {
// ↱ 입력값을 검증하기 위해 Form과 TextFormField를 사용
return Form(
// ↱ Form의 key 값에는 유니크한 키를 지정해야함
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// ↱ validator 프로퍼티를 활용한 검증 기능 제공
TextFormField(
// ↱ 입력된 값을 인수로 받음
validator: (value){
if(value.isEmpty){
return '글자를 입력시오.';
}
return '굿~';
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: (){
// ↱폼을 검정하여 통과하면 true, 실패하면 false 리턴 함
// ↱Form 내부의 모든 자식들의 validator가 실행됨
if (_formKey.currentState.validate()){
Scaffold.of(context).showSnackBar(SnackBar(content: Text('검증완료'),));
// ↳하단에 메시지를 표시하는 클래스
}
},
child: Text('검증'),
),
),
],
),
);
}
}
'Flutter > 기본' 카테고리의 다른 글
| 스톱워치 만들기 (bottomNavigationBar, floatingActionButton, Positioned, Timer, Duration, ~/, padLeft ) (0) | 2021.06.22 |
|---|---|
| 비만도 계산하기(TextFormField , InputDecoration, keyboardType) (0) | 2021.06.22 |
| UI만들기 - 하단 (중첩ListView, shrinkWrap, physics) (0) | 2021.06.20 |
| UI만들기 - 중단 부분 (carousel_slider 라이브러리, Image.network) (0) | 2021.06.20 |
| UI만들기 - 상단부분 (BottomNavigationBar) (0) | 2021.06.20 |
