> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/textfield.md).

# 입력필드 (TextField)

## TextField

![](/files/gpZUQQTS9enw5h66HARl)

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

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

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

## Obscure TextField

![](/files/cVg51wZHMM03hY6U2A5O)![](/files/V4YY4bToDs0Ue7KaFQcj)

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

```dart
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

![](/files/OwShbWqOZJCUTBA2GpaQ)

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

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

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

## Multiline TextField

![](/files/JXbXmUBnBxfKkyUl1N9k)

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

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

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

## Thousands Grouping TextField

![](/files/F9iVE36pjC3xdpKr4Ber)![](/files/vXi0mkQNcbAmkj2KcWrl)

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

```dart
/// 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

![](/files/1idraYjr2RI4Jadp5wh3)

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

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

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

## DateFormat TextField

![](/files/NrqAu5XTviOKpSjyI0eC)

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

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

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

## Outlined TextField

![](/files/1podEsnLwVCQBX7g6fAY)

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

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

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

## TextFormField

## ![](/files/ijIuHElExcaAVEFZ2QoD)![](/files/AhqSRhHc859aHBAbtdwt)

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

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

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

## Custom TextField

![](/files/pN6lnzQTRjshQ7tv5z86)

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

```dart
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
-----------------

![](/files/YGRU8MilngPmoi9al7Kz)![](/files/CG6JD4qlvBql5J3etMKj)![](/files/WuIMsIxgc5VuOQKl9aeE)

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

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

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

## Obscure PinCode TextField

![](/files/BEVzcI0KPJyE4GIS26VT)![](/files/GO7H7gknzMAhEv71bBXp)![](/files/L9YOyhpwbEWJ0wQ8Fr7L)

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

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

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

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

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