Flutter TextFormField 문서

TextFormField

• 텍스트를 입력하고 입력한 텍스트를 저장 및 유효성 검사를 하기 위한 위젯이다.
  • 올바른 이메일, 아이디 중복 확인, 기타 등등...
• TextFormField + Form 세트로 사용한다.

 

1. GlobalKey<FormState>, TextEditingController 선언

GlobalKey<FormState> _key = GlobalKey<FormState>();
TextEditingController _textEditingController = TextEditingController();

2. Form - TextFormField로 구성한다.

Form(
  key: _key,
  child: TextFormField(...),
),

3. TextFormField Property 정리

• initialValue - 초깃값
  
  • controller가 null이 아니면 사용할 수가 없다.
•  border - UnderlineInputBorder, OutlineInputBorder 위젯 사용 가능
  • UnderlineInputBorder - top, left, right에 line이 없다.
  • OutlineInputBorder - 모든 방향에 line이 존재한다.
  • gapPadding - label 양쪽의 padding 값
• onChange - 텍스트를 입력할 때마다 호출되는 함수
• onSaved - TextField에 입력된 값을 다른 변수에 저장할 때 사용한다.
  • 보통은 validator가 true 일 때 저장을 한다.
• onTap - TextFormField 위젯을 tap 할 때 호출되는 함수
• validator - 양식에 맞는 데이터인지 검사한다.
  
  • return "에러"; 를 반환하면 errorText에 "에러"라는 메시지가 띄워진다.

TextFormField(
  controller: _textEditingController,
  // initialValue: "initial Value", // controller 이 null 이 아닐때에는 사용할수가 없다.
  // autofocus: true,
  decoration: InputDecoration(
    icon: Icon(Icons.email_outlined),
    label: Text(
      "label",
      style: TextStyle(color: Colors.green, fontSize: 18),
    ),
    // labelText: "Email",
    // labelStyle: TextStyle(color: Colors.green,fontSize: 18)
    floatingLabelStyle: TextStyle(color: Colors.red), // ?
    helperText: "Helper Text & Error Text",
    // isCollapsed: true,
    hintText: "Hint Text",
    // errorText: "Error Text",
    // 에러 발생시 helperText 를 대처한다.
    // isDense: true
    contentPadding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
    prefixIcon: Icon(Icons.alternate_email_outlined),
    prefixText: "prefixText",
    suffixIcon: Icon(Icons.check),
    suffixText: "suffixText",
    counter: Icon(Icons.build),
    counterText: "counterText",
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      gapPadding: 10, // label 양쪽의 padding 값
    ),
  ),
  textCapitalization: TextCapitalization.characters, // 대문자
  // readOnly: true, // 타이핑 불가
  obscureText: false, // 비밀번호 같은 중요한 텍스트를 가린다.
  obscuringCharacter: '*', // 대체할 문자 선택 (한글자만 가능, 한국어 한글자 가능)
  onChanged: (value) {
    print('onChange : $value');
  },
  validator: (value) {
    if (value!.isEmpty) {
      return "빈칸";
    }
    return null;
  },
  onSaved: (value) {
    print('onSave : ${value}');
  },
  onTap: () {
    print('onTap');
  },
),

Form

• 하위 TextFormField에 대한 상태를 관리할 수 있는 위젯이다.
• save(), validate(), reset() 실행 시 Form 하위에 있는 모든 TextFormField에서 해당 method가 실행된다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(
      onPressed: () {
        if (_key.currentState?.validate() == true) {
          _key.currentState?.save();
        }
      },
      child: Text('save()'),
    ),
    ElevatedButton(
      onPressed: () {
        _key.currentState?.validate();
      },
      child: Text('validate()'),
    ),
    ElevatedButton(
      onPressed: () {
        _key.currentState?.reset();
      },
      child: Text('reset()'),
    ),
  ],
)

Full Source Code(더보기 클릭)

import 'package:flutter/material.dart';

void main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextFormField Demo'),
        ),
        body: TextFormFieldScreen(),
      ),
    );
  }
}

class TextFormFieldScreen extends StatefulWidget {
  const TextFormFieldScreen({Key? key}) : super(key: key);

  @override
  State<TextFormFieldScreen> createState() => _TextFormFieldScreenState();
}

class _TextFormFieldScreenState extends State<TextFormFieldScreen> {
  GlobalKey<FormState> _key = GlobalKey<FormState>();
  TextEditingController _textEditingController = TextEditingController();
  FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Form(
            key: _key,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: TextFormField(
                controller: _textEditingController,
                // initialValue: "initial Value", // controller 이 null 이 아닐때에는 사용할수가 없다.
                // autofocus: true,
                decoration: InputDecoration(
                  icon: Icon(Icons.email_outlined),
                  label: Text(
                    "label",
                    style: TextStyle(color: Colors.green, fontSize: 18),
                  ),
                  // labelText: "Email",
                  // labelStyle: TextStyle(color: Colors.green,fontSize: 18)
                  floatingLabelStyle: TextStyle(color: Colors.red),
                  // ?
                  helperText: "Helper Text & Error Text",
                  // isCollapsed: true,
                  hintText: "Hint Text",
                  // errorText: "Error Text",
                  // 에러 발생시 helperText 를 대처한다.
                  // isDense: true
                  contentPadding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
                  prefixIcon: Icon(Icons.alternate_email_outlined),
                  prefixText: "prefixText",
                  suffixIcon: Icon(Icons.check),
                  suffixText: "suffixText",
                  counter: Icon(Icons.build),
                  counterText: "counterText",
                  // UnderlineInputBorder - bottom 라인
                  // OutlineInputBorder - 전체라인
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    gapPadding: 10, // label 양쪽의 padding 값
                  ),
                ),
                // 대문자...
                textCapitalization: TextCapitalization.characters,
                // readOnly: true, // 타이핑 불가
                obscureText: false,
                // 비밀번호 같은 중요한 텍스트를 가린다.
                obscuringCharacter: '*',
                // 대체할 문자 선택 (한글자만 가능, 한국어 가능)
                onChanged: (String? value) {
                  print('onChange : $value');
                },
                onSaved: (String? value) {
                  print('onSave : ${value}');
                },
                onTap: () => print('onTap'),

                validator: (String? value) {
                  if (value!.isEmpty) {
                    return "빈칸";
                  }
                  return null;
                },
              ),
            ),
          ),
          Text('formKey method'),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {
                  if (_key.currentState?.validate() == true) {
                    _key.currentState?.save();
                  }
                },
                child: Text('save()'),
              ),
              ElevatedButton(
                onPressed: () {
                  _key.currentState?.validate();
                },
                child: Text('validate()'),
              ),
              ElevatedButton(
                onPressed: () {
                  _key.currentState?.reset();
                },
                child: Text('reset()'),
              ),
            ],
          )
        ],
      ),
    );
  }
}