Flutter-validate, formkey

위 화면처럼 TextFormField에 아무것도 안 쓰여있을 때 빨간색으로 에러를 보여주는 방법을 구현하겠습니다.

 

import 'package:flutter/material.dart';

class MyFormValidation extends StatefulWidget {
  @override
  _MyFormValidationState createState() => _MyFormValidationState();
}

class _MyFormValidationState extends State<MyFormValidation> {
  final _formKey=GlobalKey<FormState>();//자식 위젯들을 구별하기 위해 global key를 사용할 수 있습니다. global key는 모든 위젯 계층을 통틀어 유니크 해야 합니다. global key는 주어진 위젯과 연결된 상태를 찾는 데 사용될 수 있습니다.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('vaildation'),
      ),
      body: Form(
        key: _formKey,//formkey를 통해 fromstate를 알수있다.
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              validator: (value){
                if(value.isEmpty){
                  return '공백은 허용되지 않습니다.';
                }
              },
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(onPressed: (){
                if(_formKey.currentState.validate()){
                  Scaffold.of(_formKey.currentContext).showSnackBar(SnackBar(content: Text('처리중'),));
                }
              },
                child: Text("완료"),
              ),
            )

          ],
        ),
      ),
    );
  }
}

_formKey=GlobalKey <FormState>();

global key는 자식 위젯들을 구별하기 위해 사용하고, 모든 위젯을 통틀어 유니크해야 합니다. 

또 주어진 위젯과 연결된 상태를 찾는 데 사용될 수 있습니다.

 

TextFormField

textfield와 거의 동일하지만 차이점은 폼 안에 넣어 사용하면서 추가적으로 입력값을 유효성 검증이나 다른 폼필드와의 연동 등의 기능을 제공한다.

 

validator

말 그대로 value값을 보고 유효성 검사를 하는 것