[Flutter] 플러터 TextFormField 위젯 - 소스코드

플러터(Flutter)에서 제공하는 TextFormField, Form에 대한 전체 샘플 코드를 작성하였습니다. 소스코드 전체를 Copy 하시고 프로젝트를 실행하시면 바로 확인하실 수 있습니다.

 

 

 

TextFormField-screen

플러터에서 제공하는 TextFormField, Form, TextEdittingController, GlobalKey 에 대해 상세한 설명을 보실 수 있습니다.

[Flutter] 플러터 텍스트 에디터 위젯 - TextFormField, From, TextEdittingController, GlobalKey

 

 

 

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyTextFormField());
}

class MyTextFormField extends StatefulWidget {
  MyTextFormField({super.key});

  @override
  State<MyTextFormField> createState() => _MyTextFormFieldState();
}

class _MyTextFormFieldState extends State<MyTextFormField> {
  var _formKey = GlobalKey<FormState>();
  var _textEditorController = TextEditingController();

  void dispose() {
    _textEditorController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Center(
            child: Form(
              // 키보드 이벤트 발생시마다 유효성 검사
              // autovalidateMode: AutovalidateMode.always,
              key: _formKey,
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TextFormField(
                      controller: _textEditorController,
                      // 유효성 검사
                      validator: (String? value) {
                        if (value!.length < 1) {
                          return '필수사항입니다.';
                        }
                        return null;
                      },
                    ),
                    SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: () {
                        final value = _formKey.currentState!.validate();

                        if (value) {
                          print(_textEditorController.text);
                          _textEditorController.text = '';
                        } else {
                          print('텍스트 에디트 내용에 문제 발생함!!!!');
                        }
                      },
                      child: Text('확인'),
                    ),
                    SizedBox(height: 20),
                    TextFormField(
                      decoration: InputDecoration(
                        icon: Icon(Icons.person),
                        prefixIcon: Icon(Icons.phone),
                        suffixIcon: Icon(Icons.star),
                        label: Text('phone number'),
                        hintText: '0101231234',
                      ),
                    ),
                    SizedBox(height: 20),
                    TextFormField(
                      decoration: InputDecoration(
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Colors.grey, width: 2),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide(color: Colors.blue, width: 2),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),

                    // 글자수 제한
                    TextFormField(
                      maxLength: 10,
                    ),

                    // 숫자 키패드
                    TextFormField(
                      keyboardType: TextInputType.number,
                    ),

                    // 입력문자 안보이게(비밀번호)
                    TextFormField(
                      obscureText: true,
                    ),

                    Container(
                      color: Colors.amber,
                      width: double.infinity,
                      height: 60,
                      child: Center(child: Text('여기부터 정규식')),
                    ),
                    // 정규식 =======================================//
                    // 추가 : import 'package:flutter/services.dart'
                    // - 정규식 숫자만
                    TextFormField(
                      inputFormatters: [
                        FilteringTextInputFormatter.digitsOnly,
                      ],
                    ),
                    // - 정규식 : 특수문자 제외(한글,영어,숫자 가능)
                    TextFormField(
                      inputFormatters: [
                        FilteringTextInputFormatter(
                          RegExp('[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|]'),
                          allow: true,
                        )
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}