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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/textfield.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.