[Flutter] TextFormField 분석

기능 만들기

• hintText  : placeholder 역할을 하는 옵션
• obscureText  : 비밀번호처럼 보여주는 *** 역할을 하는 옵션

두가지는 필수적으로 필요한 기능이고,,

• autoFocus : 화면 첫 진입 시 ID 입력 바로 할 수 있도록 Focus 하는 기능
• onChanged : 실행될 때마다 수행할 수 있는 기능 틀 제작 기능

final bool obscureText;                 // 비밀번호인지?
final bool autoFocus;                   // focus 될 것인지?
final String? hintText;                 // placeholder
final ValueChanged<String>? onChanged;  // 실행 될 때마다 수행할 것

 

final 로 넣었으니 생성자 생성해준다.

const CustomTextFormField({
  this.hintText,
  this.obscureText = false,
  this.autoFocus = false,
  required this.onChanged,
  Key? key
}) : super(key: key);

 

마지막으로 build 에서 어떻게 표현해주는지 파악하면 완료

@override
Widget build(BuildContext context) {
  return TextFormField(
    obscureText: obscureText,
    autofocus: autoFocus,
    decoration: InputDecoration(
      hintText: hintText,
    ),
  );
}

 

아래는 전체 코드이다.

import 'package:flutter/material.dart';

class CustomTextFormField extends StatelessWidget {
  final bool obscureText;                 // 비밀번호인지?
  final bool autoFocus;                   // focus 될 것인지?
  final String? hintText;                 // placeholder
  final ValueChanged<String>? onChanged;  // 실행 될 때마다 수행할 것

  const CustomTextFormField({
    this.hintText,
    this.obscureText = false,
    this.autoFocus = false,
    required this.onChanged,
    Key? key
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      obscureText: obscureText,
      autofocus: autoFocus,
      decoration: InputDecoration(
        hintText: hintText,
      ),
    );
  }
}

 

아래 그림처럼 생성이 되는데, 강의에서는 CSS 까지 입혀서 더 이쁘게 만들 수 있는 방법도 알려준다.

 

CSS 만들기

@override
Widget build(BuildContext context) {
  const border = OutlineInputBorder(
    borderSide: BorderSide(
      color: INPUT_BG_COLOR,
      width: 1.0,
    ),
  );
  const hintStyle = TextStyle(fontSize: 13.0);

  return TextFormField(
    obscureText: obscureText,
    autofocus: autoFocus,
    decoration: InputDecoration(
      hintText: hintText,
      contentPadding: const EdgeInsets.all(16.0),
      hintStyle: hintStyle,
      fillColor: INPUT_BG_COLOR,
      filled: true,
      border: border,
      focusedBorder: border.copyWith(
        borderSide: border.borderSide.copyWith(
          color: PRIMARY_COLOR,
        ),
      ),
    ),
    cursorColor: PRIMARY_COLOR,
  );
}

 

나름 보기 좋은 TextField 가 생성되었다.

 

Main 작성

메인 화면은 Component 를 배치하는 용도로 사용된다.

배치할 곳을 아래와 같이 작성해준다.

import 'package:flutter/material.dart';
import 'package:flutter_project_1/common/component/custom_text_form_field.dart';

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

class _App extends StatelessWidget {
  const _App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomTextFormField(
              onChanged: (String value) {},
              hintText: '아이디 입력',
            ),
            CustomTextFormField(
              onChanged: (String value) {},
              hintText: '비밀번호 입력',
              obscureText: true,
            ),
          ],
        ),
      ),
    );
  }
}

 

컴포넌트를 잘 설계해두면 객체를 블록쌓듯이 붙여놓으면 되는 것 같아 편리하다고 생각했다.