코딩하는 제리

[Flutter/Project](Instagram Clone) TextFormField 데이터 정확성 확인 본문

Flutter/Project_InstaClone(완)

[Flutter/Project](Instagram Clone) TextFormField 데이터 정확성 확인

JerryCho 2021. 1. 25. 12:44



소스코드 및 pubspec.yaml

// sign_up_form.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/common_size.dart';

class SignUpForm extends StatefulWidget {
  @override
  _SignUpFormState createState() => _SignUpFormState();
}

class _SignUpFormState extends State<SignUpForm> {
  // 해당 Form의 상태를 저장
  GlobalKey<FormState> _formKey = GlobalKey();

  // TextFormField의 데이터를 사용하기 위한 Controller
  TextEditingController _emailController = TextEditingController();
  TextEditingController _passController = TextEditingController();
  TextEditingController _cPassController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _passController.dispose();
    _cPassController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(common_gap),
      child: Form(
        key: _formKey,
        child: ListView(
          // 안드로이드 디바이스의 사이즈가 작을 수도 있기에
          // 스크롤이 가능한 리스트뷰로 생성.
          children: [
            SizedBox(
              height: common_l_gap,
            ),
            Image.asset('assets/images/insta_text_logo.png'),
            TextFormField(
              controller: _emailController,
              decoration: _textInputDec('Email'),
              cursorColor: Colors.black54,
              validator: (text) {
                // text가 비어있지 않으며 '@'가 존재하면 true
                if (text.isNotEmpty && text.contains('@'))
                  return null;
                else
                  return '정확한 이메일 주소를 입력해주세요.';
              },
            ),
            SizedBox(
              height: common_xs_gap,
            ),
            TextFormField(
              controller: _passController,
              decoration: _textInputDec('Password'),
              cursorColor: Colors.black54,
              validator: (text) {
                if (text.isNotEmpty && text.length >= 4)
                  return null;
                else
                  return '4자리 이상 입력해주세요.';
              },
            ),
            SizedBox(
              height: common_xs_gap,
            ),
            TextFormField(
              controller: _cPassController,
              decoration: _textInputDec('Confirm Password'),
              cursorColor: Colors.black54,
              validator: (text) {
                if (text.isNotEmpty && _passController.text == text)
                  return null;
                else
                  return '비밀번호가 일치하지 않습니다.';
              },
            ),
            SizedBox(
              height: common_xs_gap,
            ),
            FlatButton(
              onPressed: () {
                if (_formKey.currentState.validate())
                  print('validating success');
              },
              child: Text(
                'Join',
                style: TextStyle(color: Colors.white),
              ),
              color: Colors.blue,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8)),
            )
          ],
        ),
      ),
    );
  }

  InputDecoration _textInputDec(String hint) {
    return InputDecoration(
      hintText: hint,
      enabledBorder: OutlineInputBorder(
        // TextFormField 테두리
        borderSide: BorderSide(
          color: Colors.grey[300],
        ),
        // TextFormField 모서리 둥글기
        borderRadius: BorderRadius.circular(common_s_gap),
      ),
      focusedBorder: OutlineInputBorder(
        // TextFormField 테두리
        borderSide: BorderSide(
          color: Colors.grey[300],
        ),
        // TextFormField 모서리 둥글기
        borderRadius: BorderRadius.circular(common_s_gap),
      ),
      errorBorder: OutlineInputBorder(
        // TextFormField 테두리
        borderSide: BorderSide(
          color: Colors.red,
        ),
        // TextFormField 모서리 둥글기
        borderRadius: BorderRadius.circular(common_s_gap),
      ),
      focusedErrorBorder: OutlineInputBorder(
        // TextFormField 테두리
        borderSide: BorderSide(
          color: Colors.red,
        ),
        // TextFormField 모서리 둥글기
        borderRadius: BorderRadius.circular(common_s_gap),
      ),
      filled: true,
      fillColor: Colors.grey[100],
    );
  }
}
Comments