입력필드 (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 위젯을 구현하고 사용자와의 상호작용을 더욱 효과적으로 만들어보세요.

Previous페이지 트랜지션 Next체크박스 (CheckBox)

Last updated 1 year ago