플러터에서 TextField 사용하기: 심층 가이드

Flutter는 다양한 기능을 제공하는 강력한 모바일 앱 개발 프레임워크입니다.

텍스트 입력 기능은 모든 앱에서 필수적인 요소이며, Flutter에서 이를 구현하는 가장 일반적인 방법은 TextField 위젯을 사용하는 것입니다.

이 블로그 게시글에서는 Flutter에서 텍스트 폼을 사용하는 방법에 대한 심층적인 안내를 제공합니다.

1. 기본 텍스트 폼

텍스트 폼을 만드는 가장 간단한 방법은 TextField 위젯을 사용하는 것입니다.

이 위젯은 다음과 같은 속성을 사용하여 사용자 정의할 수 있습니다:

• decoration: 텍스트 폼의 모양을 제어합니다. 여기에는 테두리, 채우기, 레이블, 힌트 텍스트 등이 포함됩니다.
• controller: 텍스트 폼의 텍스트 내용을 제어하는 데 사용되는 TextEditingController 객체입니다.
• keyboardType: 키보드 유형을 지정합니다. 예를 들어 숫자만 입력하도록 제한하거나 이메일 주소 입력을 위한 키보드를 표시할 수 있습니다.
• textInputAction: 사용자가 텍스트 입력을 완료했을 때 수행되는 작업을 지정합니다. 예를 들어 다음 입력 필드로 이동하거나 폼을 제출할 수 있습니다.

TextField(
  decoration: InputDecoration(
    labelText: '이름',
  ),
  controller: _nameController,
  keyboardType: TextInputType.name,
  textInputAction: TextInputAction.next,
),

 

2. 유효성 검사

사용자 입력이 유효한지 확인하는 것은 중요합니다. Flutter는 TextFormField 위젯을 사용하여 유효성 검사를 쉽게 수행할 수 있도록 도와줍니다.

TextFormField은 validator 속성을 사용하여 사용자 입력을 검사하는 함수를 제공합니다.

이 함수는 문자열을 반환해야 하며, 유효하지 않은 경우 오류 메시지를 반환해야 합니다.

TextFormField(
  decoration: InputDecoration(
    labelText: '이메일',
  ),
  validator: (value) {
    if (!value.contains('@')) {
      return '유효한 이메일 주소가 아닙니다.';
    }
    return null;
  },
),

 

3. 자동 완성

사용자가 입력하는 동안 제안을 제공하여 입력 속도를 높일 수 있습니다.

Flutter는 Autocomplete 위젯을 사용하여 자동 완성 기능을 구현할 수 있도록 도와줍니다.

Autocomplete 위젯은 suggestions 속성을 사용하여 제안 목록을 제공하고 onSelected 콜백을 사용하여 사용자가 제안을 선택했을 때 수행되는 작업을 지정할 수 있습니다.

Autocomplete(
  suggestions: _suggestions,
  onSelected: (suggestion) {
    setState(() {
      _selectedSuggestion = suggestion;
    });
  },
),

 

4. 입력 포커스 제어

어떤 텍스트 폼이 포커스를 가지고 있는지 제어하는 것은 중요합니다.

Flutter는 FocusNode 및 FocusScope 위젯을 사용하여 입력 포커스를 제어할 수 있도록 도와줍니다.

FocusNode는 특정 텍스트 폼에 대한 포커스를 나타내는 객체이며, FocusScope는 포커스 노드 계층을 관리하는 데 사용됩니다.

FocusNode _focusNode = FocusNode();

TextField(
  decoration: InputDecoration(
    labelText: '검색',
  ),
  focusNode: _focusNode,
),

ElevatedButton(
  onPressed: () {
    _focusNode.requestFocus();
  },
  child: Text('포커스 설정'),
),

 

5. 다양한 텍스트 폼 스타일

Flutter에서 텍스트 폼의 스타일을 다양하게 설정할 수 있습니다.

앞서 언급한 InputDecoration 및 TextStyle 위젯 외에도 다음과 같은 속성을 사용하여 스타일을 조정할 수 있습니다:

• contentPadding: 텍스트 폼의 내용과 테두리 사이의 여백을 지정합니다.
• counter: 텍스트 폼에 입력 가능한 최대 문자 수를 표시합니다.
• icon: 텍스트 폼 옆에 아이콘을 표시합니다.
• suffixIcon: 텍스트 폼 끝에 아이콘을 표시합니다.
• enabled: 텍스트 폼을 사용자 정의할 수 있는지 여부를 지정합니다.
• readOnly: 텍스트 폼을 읽기 전용으로 설정합니다.
• obscureText: 텍스트를 숨깁니다 (예: 비밀번호 입력 필드).

다음은 다양한 스타일을 만드는 데 사용할 수 있는 몇 가지 예제입니다.

 

테두리 있는 텍스트 폼

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
),

 

둥근 모서리 있는 텍스트 폼

 

TextField(
  decoration: InputDecoration(
    border: RoundedRectangleBorder(),
  ),
),

 

색상이 있는 텍스트 폼

TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.blue,
  ),
),

 

아이콘이 있는 텍스트 폼

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.search),
  ),
),

 

플레이스홀더 텍스트가 있는 텍스트 폼

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

위의 예제를 조합하여 원하는 스타일을 만들 수 있습니다.

6. 고급 텍스트 폼 기능

Flutter는 다음과 같은 고급 텍스트 폼 기능도 제공합니다:

• 입력 포맷팅: 숫자, 이메일 주소, 전화번호와 같은 특정 형식의 입력을 허용합니다.
• 텍스트 선택: 사용자가 텍스트를 선택하고 복사하거나 붙여넣을 수 있도록 합니다.
• 날짜 및 시간 선택: 사용자가 날짜 및 시간을 선택할 수 있는 달력 및 시간 선택기를 표시합니다.
• 리치 텍스트 편집: 사용자가 글꼴, 색상, 크기 등을 변경할 수 있는 풍부한 텍스트 편집기를 제공합니다.

이러한 고급 기능을 사용하여 더욱 복잡하고 사용자 친화적인 텍스트 폼을 만들 수 있습니다.

7. 텍스트 폼과 제스처

Flutter는 텍스트 폼과 함께 사용할 수 있는 다양한 제스처를 제공합니다. 예를 들어 다음과 같은 작업을 수행할 수 있습니다:

• 탭: 텍스트 폼을 탭하여 포커스를 설정합니다.
• 스와이프: 텍스트를 선택합니다.
• 두 번 탭: 단어를 선택합니다.
• 길게 누름: 컨텍스트 메뉴를 표시합니다.

제스처를 사용하여 텍스트 폼 상호 작용을 더욱 자연스럽고 효율적으로 만들 수 있습니다.

 

8. Flutter에서 텍스트 폼 활용 실제 예제

이전 섹션에서는 Flutter에서 텍스트 폼을 사용하는 방법에 대한 기본적인 내용을 다루었습니다. 이 섹션에서는 실제 예제를 통해 텍스트 폼을 활용하는 방법을 보여드리겠습니다.

1. 간단한 로그인 폼

다음은 사용자 이름과 비밀번호를 입력할 수 있는 간단한 로그인 폼을 만드는 방법입니다.

final _formKey = GlobalKey<FormState>();
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();

void _login() {
  if (_formKey.currentState.validate()) {
    // 로그인 로직을 여기에 작성합니다.
    print('사용자 이름: ${_usernameController.text}');
    print('비밀번호: ${_passwordController.text}');
  }
}

@override
Widget build(BuildContext context) {
  return Form(
    key: _formKey,
    child: Column(
      children: <Widget>[
        TextFormField(
          decoration: InputDecoration(
            labelText: '사용자 이름',
          ),
          controller: _usernameController,
          validator: (value) {
            if (value.isEmpty) {
              return '사용자 이름을 입력하세요.';
            }
            return null;
          },
        ),
        TextFormField(
          decoration: InputDecoration(
            labelText: '비밀번호',
          ),
          controller: _passwordController,
          obscureText: true,
          validator: (value) {
            if (value.isEmpty) {
              return '비밀번호를 입력하세요.';
            }
            return null;
          },
        ),
        ElevatedButton(
          onPressed: _login,
          child: Text('로그인'),
        ),
      ],
    ),
  );
}

 

2. 검색 폼

다음은 사용자가 검색어를 입력할 수 있는 검색 폼을 만드는 방법입니다.

final _searchController = TextEditingController();

void _onSearch() {
  print('검색어: ${_searchController.text}');
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      TextField(
        decoration: InputDecoration(
          labelText: '검색',
        ),
        controller: _searchController,
        onSubmitted: _onSearch,
      ),
      ElevatedButton(
        onPressed: _onSearch,
        child: Text('검색'),
      ),
    ],
  );
}

 

3. 입력 포맷팅 폼

다음은 사용자가 숫자만 입력할 수 있는 폼을 만드는 방법입니다.

final _numberController = TextEditingController();

@override
Widget build(BuildContext context) {
  return TextField(
    decoration: InputDecoration(
      labelText: '숫자',
    ),
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
      FilteringTextInputFormatter.digitsOnly,
    ],
    controller: _numberController,
  );
}

 

4. 날짜 및 시간 선택 폼

다음은 사용자가 날짜 및 시간을 선택할 수 있는 폼을 만드는 방법입니다.

final _dateController = TextEditingController();

void _selectDate() async {
  final DateTime? pickedDate = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2030),
  );
  if (pickedDate != null) {
    _dateController.text = pickedDate.toIso8601String();
  }
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      TextField(
        decoration: InputDecoration(
          labelText: '날짜',
        ),
        controller: _dateController,
        onTap: _selectDate,
        readOnly: true,
      ),
      ElevatedButton(
        onPressed: _selectDate,
        child: Text('날짜 선택'),
      ),
    ],
  );
}

5. 풍부한 텍스트 편집 폼

다음은 사용자가 글꼴, 색상, 크기 등을 변경할 수 있는 풍부한 텍스트 편집기를 만드는 방법입니다.

final _textController = TextEditingController();

void _toggleBold() {
  setState(() {
    _textStyle = _textStyle.copyWith(fontWeight: _textStyle.fontWeight == FontWeight.bold ? FontWeight.normal : FontWeight.bold);
  });
}

void _toggleItalic() {
  setState(() {
    _textStyle = _textStyle.copyWith(fontStyle: _textStyle.fontStyle == FontStyle.italic ? FontStyle.normal : FontStyle.italic);
  });
}

void _changeColor(Color color) {
  setState(() {
    _textStyle = _textStyle.copyWith(color: color);
  });
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      TextField(
        decoration: InputDecoration(
          labelText: '텍스트',
        ),
        controller: _textController,
        style: _textStyle,
        maxLines: 10,
      ),
      Row(
        children: <Widget>[
          IconButton(
            icon: Icon(_textStyle.fontWeight == FontWeight.bold ? Icons.format_bold : Icons.format_text),
            onPressed: _toggleBold,
          ),
          IconButton(
            icon: Icon(_textStyle.fontStyle == FontStyle.italic ? Icons.format_italic : Icons.format_normal),
            onPressed: _toggleItalic,
          ),
          IconButton(
            icon: Icon(Icons.color_lens),
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return ColorPicker(
                    color: _textStyle.color ?? Colors.black,
                    onColorChanged: (Color color) {
                      _changeColor(color);
                      Navigator.pop(context);
                    },
                  );
                },
              );
            },
          ),
        ],
      ),
    ],
  );
}

 

이 예제들은 Flutter에서 텍스트 폼을 활용하는 다양한 방법을 보여주는 일부에 불과합니다. 텍스트 폼을 사용하여 다양한 기능을 가진 사용자 인터페이스를 만들 수 있습니다.

10. 텍스트 폼과 관련된 추가 팁

• 유효성 검사를 사용하여 사용자 입력 오류를 방지하십시오.
• 제스처를 사용하여 텍스트 폼 상호 작용을 더욱 자연스럽고 효율적으로 만드십시오.
• 다양한 스타일과 기능을 사용하여 다양한 요구 사항을 충족하는 텍스트 폼을 만드십시오.
• 텍스트 폼과 다른 위젯을 결합하여 풍부한 사용자 인터페이스를 만드십시오.

이 블로그 게시글에서 Flutter에서 텍스트 폼을 사용하는 방법에 대한 기본적인 내용을 알아보았기를 바랍니다.

텍스트 폼은 다양한 앱에서 필수적인 기능이며, Flutter에서 이를 사용하는 것은 매우 간단합니다.

 

11. 맺음말

Flutter는 다양한 기능을 제공하는 강력한 모바일 앱 개발 프레임워크입니다.

텍스트 입력 기능은 모든 앱에서 필수적인 요소이며, Flutter에서 이를 구현하는 가장 일반적인 방법은 TextField 위젯을 사용하는 것입니다.

이 블로그 게시글에서는 Flutter에서 텍스트 폼을 사용하는 방법에 대한 심층적인 안내를 제공했습니다.

이 게시글이 도움이 되었기를 바랍니다.

텍스트 폼 사용에 대한 질문이나 의견이 있으면 언제든지 남겨주세요.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release