입력필드 (TextField)

Flutter는 사용자로부터 다양한 형태의 데이터를 입력받아야 하는 경우 TextField 위젯을 사용하여 입력 필드를 구현할 수 있습니다. TextField 위젯은 텍스트 입력, 숫자 입력, 핸드폰 번호, 신용카드 번호 등 다양한 유형의 입력을 처리할 수 있어 앱 개발에서 핵심 역할을 합니다.

TextField

기본 형태의 입력 필드로, TextField 위젯은 간단한 텍스트를 입력받을 수 있습니다.

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'TextField',
  ),
  onChanged: (text) {
    setState(() {});
  },
);

위 코드에서는 'TextField' 라는 라벨을 가진 TextField를 생성하고, 텍스트 입력이 변경될 때마다 상태를 업데이트합니다.

Obscure TextField

비밀번호를 입력받아야 하는 경우, 비밀번호 입력 필드를 구현할 수 있습니다. 사용자가 입력한 비밀번호를 감출 수 있도록 하는 것이 특징입니다.

TextField(
  obscureText: !this._showPassword,
  decoration: InputDecoration(
    labelText: 'Obscure TextField',
    prefixIcon: const Icon(Icons.security),
    suffixIcon: IconButton(
      icon: Icon(
        Icons.remove_red_eye,
        color: this._showPassword
            ? agnesTheme.primaryColor
            : Colors.grey,
      ),
      onPressed: () {
        setState(() => this._showPassword = !this._showPassword);
      },
    ),
  ),
);

위 코드에서는 비밀번호 입력필드를 생성하고, 사용자가 비밀번호를 감출 수 있는 옵션을 제공합니다.

Phone Number TextField

핸드폰 번호를 입력받는 TextField를 구현할 때 PhoneNumberInput 위젯을 사용할 수 있습니다.

PhoneNumberInput(
  hint: 'Phone Number TextField',
  countryListMode: CountryListMode.bottomSheet,
  contactsPickerPosition: ContactsPickerPosition.suffix,
);

위 코드에서는 핸드폰 번호 입력필드를 생성하고, 국가 선택 기능과 연락처 선택 위치를 설정할 수 있습니다.

Multiline TextField

긴 텍스트나 여러 줄의 텍스트를 입력받아야 할 때, 다중 행 입력 필드를 구현할 수 있습니다.

TextField(
  maxLines: 10,
  textCapitalization: TextCapitalization.sentences,
  decoration: InputDecoration(
    counterText: '',
    labelText: 'Multiline TextField',
    alignLabelWithHint: true,
    hintText: '',
    border: const OutlineInputBorder(),
  ),
);

위 코드에서는 다중 행 입력 필드를 생성하고, 최대 줄 수를 지정할 수 있습니다.

Thousands Grouping TextField

숫자를 입력받아야 하는 경우, 숫자 입력 필드를 사용할 수 있습니다. 또한, 세 자리마다 콤마를 추가하는 ThousandsFormatter를 적용하여 숫자를 그룹화할 수 있습니다.

/// Integer Number 
TextField(
                    keyboardType: TextInputType.number, 
                    inputFormatters: [ThousandsFormatter()
                ]);

/// Decimal Number 
TextField(
                    keyboardType: TextInputType.number,
                    inputFormatters: [ThousandsFormatter(allowFraction: true)]);             

• Integer Number : 정수를 입력받아 세 자릿수 마다 콤마를 넣는 숫자 포맷을 구현합니다.

• Decimal Number : 실수를 입력받아 세 자릿수 마다 콤마를 넣는 숫자 포맷을 구현합니다.

위 코드에서는 ThousandsFormatter를 사용하여 숫자 그룹화를 적용하며, 필요에 따라 정수와 실수 옵션을 선택하여 사용할 수 있습니다.

CardNumber Grouping TextField

신용 카드 번호를 입력 받아야 하는 경우, CreditCardFormatter를 사용하여 숫자 그룹화를 적용한 TextField를 구현할 수 있습니다.

TextField(
  keyboardType: TextInputType.number,
  inputFormatters: [
    CreditCardFormatter()
  ],
);

위 코드에서는 CreditCardFormatter를 사용하여 네 개의 숫자마다 띄어쓰기를 적용합니다.

DateFormat TextField

날짜 형식을 입력 받아야 하는 경우, DateInputFormatter를 사용하여 연-월-일 형식으로 숫자를 입력받는 TextField를 구현할 수 있습니다.

TextField(
  keyboardType: TextInputType.number,
  inputFormatters: [
    DateInputFormatter()
  ],
);

위 코드에서는 DateInputFormatter를 사용하여 날짜 형식으로 숫자를 입력받습니다.

Outlined TextField

외곽선 스타일을 가진 입력필드를 생성할 때는 TextFormField를 사용할 수 있습니다.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Outlined TextField',
    errorText: '에러 메시지',
    border: OutlineInputBorder(),
    suffixIcon: Icon(
      Icons.error,
      color: Colors.red,
    ),
  ),
);

위 코드에서는 외곽선 스타일 입력필드를 생성하고, 에러 메시지와 외곽선 스타일을 설정할 수 있습니다.

TextFormField

입력 받은 텍스트의 유효성 검사가 가능한 입력필드를 구현합니다.

TextFormField(
                  maxLength: 20,
                  decoration: InputDecoration(
                    labelText: 'TextFormField',
                    labelStyle: TextStyle(color: agnesTheme.primaryColor),
                    helperText: 'Helper text',
                    enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: agnesTheme.primaryColor)),
                  ),
                );

유효성 검증을 하여 에러 메시지를 사용자에게 보여주거나, 입력된 글자수를 표기하는 입력필드로 주로 회원가입 기능에 활용됩니다.

Custom TextField

사용자 정의 스타일을 가진 입력필드를 구현할 수 있습니다. 이를 통해 배경색과 텍스트 색상 등을 사용자 정의할 수 있습니다.

TextField(
  cursorColor: Colors.white,
  style: TextStyle(color: Colors.white),
  decoration: InputDecoration(
    hintText: 'Custom TextField',
    hintStyle: TextStyle(color: Colors.white),
    filled: true,
    fillColor: Colors.blue[100],
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(50),
    ),
  ),
);

위 코드에서는 사용자 정의 스타일을 가진 입력필드를 생성하고, 배경색과 텍스트 색상을 사용자 정의할 수 있습니다.

PinCode TextField

보안 강화가 필요할 때, 핀 코드 입력필드를 사용할 수 있습니다. 핀 코드를 입력할 때 각 자리의 박스가 있는 입력필드를 생성할 수 있습니다.

PinCodeTextField(
  pinBoxWidth: 50,
  pinBoxHeight: 50,
  defaultBorderColor: agnesTheme.primaryColor,
);

위 코드에서는 핀 코드 입력 필드를 생성하고, 각 핀을 입력할 수 있는 상자를 설정합니다.

Obscure PinCode TextField

핀 코드를 감출 수 있는 형태로 입력필드를 구현할 수도 있습니다.

PinCodeTextField(
  hideCharacter: true,
  pinBoxWidth: 50,
  pinBoxHeight: 50,
  defaultBorderColor: agnesTheme.primaryColor,
);

위 코드에서는 감춘 핀 코드 입력 필드를 생성하고, 핀 코드를 감출 수 있도록 설정합니다.

Flutter의 TextField 위젯을 이용하여 다양한 형태의 입력 필드를 구현할 수 있습니다. 이러한 다양한 옵션을 사용하여 사용자로부터 정보를 수집하고 앱의 기능을 확장할 수 있습니다. TextField 위젯은 Flutter 앱을 더욱 유연하고 사용자 친화적으로 만들어줍니다.

위에서 설명한 내용을 참고하여 Flutter 앱에서 다양한 형태의 TextField 위젯을 구현하고 사용자와의 상호작용을 더욱 효과적으로 만들어보세요.