Flutter에서 텍스트 입력 필드 구현 및 스타일링 방법

Flutter 앱에서 텍스트 필드는 사용자 입력을 수집하는 데 필수적인 요소입니다. 이 글에서는 Flutter의 TextField와 TextFormField를 사용해 텍스트 필드를 만드는 방법과, 다양한 스타일링 옵션을 활용하는 방법을 알아보겠습니다. 또한 InputDecoration 속성을 활용해 필드에 레이블, 힌트 텍스트, 에러 메시지를 표시하는 방법도 함께 다룹니다.

참고. Create and style a text field

Flutter에서 텍스트 입력 필드 사용하기

1. TextField와 TextFormField란?

Flutter에서 텍스트 입력 필드를 만들 때 가장 많이 사용하는 두 가지 위젯은 TextField와 TextFormField입니다.

• TextField: 기본 텍스트 입력 필드로, 사용자에게 정보를 입력받는 필드를 제공합니다.
• TextFormField: TextField의 기능에 폼과의 통합 및 유효성 검사를 추가한 위젯으로, 폼 내에서 유효성 검사와 같은 추가 기능을 필요로 하는 경우에 사용됩니다.

2. 기본적인 TextField 구현

TextField는 가장 기본적인 텍스트 입력 위젯으로, InputDecoration 속성을 사용해 다양한 UI 요소를 추가할 수 있습니다. 예를 들어, 텍스트 필드에 외곽선을 추가하고 힌트 텍스트를 표시하려면 다음과 같이 설정할 수 있습니다.

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: '검색어를 입력하세요',
  ),
),

InputDecoration으로 가능한 다양한 설정

• border: 외곽선 스타일을 설정합니다. 기본값은 밑줄이지만, OutlineInputBorder()를 사용해 외곽선으로 변경할 수 있습니다.
• hintText: 사용자가 텍스트 필드에 입력해야 할 내용을 안내하는 힌트 텍스트입니다.
• labelText: 필드에 제목을 추가하여 필드의 용도를 명확하게 합니다.
• errorText: 입력값이 유효하지 않을 경우 오류 메시지를 표시하는 데 사용됩니다.

3. TextFormField로 폼에 유효성 검사 추가하기

TextFormField는 폼과 연동되어 추가적인 기능을 제공합니다. validator 속성을 사용해 유효성 검사를 추가할 수 있으며, TextField와 동일한 InputDecoration을 사용하여 필드를 스타일링할 수 있습니다.

TextFormField(
  decoration: const InputDecoration(
    border: UnderlineInputBorder(),
    labelText: '사용자 이름을 입력하세요',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '이 필드는 비워둘 수 없습니다';
    }
    return null;
  },
),

4. 사용자의 입력값 관리하기

Flutter에서는 사용자가 텍스트 필드에 입력한 값을 관리할 수 있습니다. TextEditingController를 사용하면 텍스트 필드에 입력된 값을 쉽게 추적하고 변경할 수 있으며, 이를 통해 사용자가 입력한 텍스트를 가져오거나 필드를 초기화할 수 있습니다.

final TextEditingController _controller = TextEditingController();

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

// 텍스트 필드 설정
TextField(
  controller: _controller,
  decoration: const InputDecoration(
    hintText: '이름을 입력하세요',
  ),
),

TextEditingController 사용 시 주의사항

TextEditingController는 텍스트 필드가 사라질 때 반드시 해제해야 합니다. 이를 위해 dispose() 메서드를 호출해 메모리 누수를 방지합니다.

5. TextField와 TextFormField의 차이점

TextField와 TextFormField는 겉으로 보기엔 비슷해 보일 수 있지만, TextFormField는 Form과 함께 사용될 때 유효성 검사와 같은 기능을 추가적으로 지원합니다. 일반적으로 단순한 입력만 필요한 경우에는 TextField를 사용하고, 폼에 포함된 텍스트 필드에서는 TextFormField를 사용하는 것이 좋습니다.

구분	TextField	TextFormField
용도	기본 텍스트 입력 필드	폼과 통합되어 유효성 검사 지원
유효성 검사	지원하지 않음	validator 속성으로 유효성 검사 가능
Form과의 통합	지원하지 않음	Form 위젯과 통합 가능

---

Flutter 텍스트 입력 필드 활용 팁

• UI/UX 향상: InputDecoration을 통해 사용자가 이해하기 쉬운 인터페이스를 제공하세요.
• 유효성 검사: TextFormField와 validator 속성을 통해 사용자의 입력 오류를 사전에 방지할 수 있습니다.
• 컨트롤러 활용: TextEditingController로 입력된 텍스트를 실시간으로 확인하고, 필요 시 데이터를 즉시 변경하거나 초기화할 수 있습니다.

Flutter에서 텍스트 필드는 사용자 경험을 크게 좌우하는 중요한 UI 요소입니다. 텍스트 필드의 기능과 스타일링을 적절히 활용하여 사용자 친화적인 입력 인터페이스를 만들어 보세요.

 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Styling Demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        const Padding(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Enter a search term',
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
          child: TextFormField(
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'Enter your username',
            ),
          ),
        ),
      ],
    );
  }
}