Flutter의 TextField 사용법

Flutter에서 TextField 위젯은 사용자로부터 텍스트 입력을 받을 수 있는 기본 위젯입니다. 다양한 설정과 스타일링 옵션을 제공하여, 입력 필드의 외관과 동작을 세밀하게 조정할 수 있습니다. 이번 글에서는 Flutter의 TextField 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

 

1. 기본 TextField 사용법

TextField 위젯의 기본적인 사용법은 매우 간단합니다. 가장 기본적인 형태의 TextField는 다음과 같습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Demo')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TextField(
            decoration: InputDecoration(labelText: 'Enter your name'),
          ),
        ),
      ),
    );
  }
}

 

위 코드는 "Enter your name"이라는 라벨을 가진 기본적인 TextField를 생성합니다.

2. TextField 입력값 처리

TextField의 입력값을 처리하기 위해 onChanged 콜백을 사용할 수 있습니다. 이 콜백은 사용자가 텍스트를 입력할 때마다 호출됩니다.

 

TextField(
  decoration: InputDecoration(labelText: 'Enter your name'),
  onChanged: (text) {
    print('Text changed to: $text');
  },
)

 

위 코드는 사용자가 텍스트를 입력할 때마다 입력값을 콘솔에 출력합니다.

3. 컨트롤러 사용

TextEditingController를 사용하면 TextField의 텍스트를 프로그램matically 제어할 수 있습니다. 이를 통해 입력값을 설정하거나 가져올 수 있습니다.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Demo')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              TextField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Enter your name'),
              ),
              ElevatedButton(
                onPressed: () {
                  print('Text: ${_controller.text}');
                },
                child: Text('Print Text'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드는 TextEditingController를 사용하여 입력값을 제어하고, 버튼을 눌렀을 때 입력된 텍스트를 콘솔에 출력합니다.

 

 

반응형

 

 

4. 비밀번호 입력 필드

비밀번호 입력 필드는 obscureText 속성을 사용하여 입력된 텍스트가 보이지 않도록 설정할 수 있습니다.

 

TextField(
  decoration: InputDecoration(labelText: 'Enter your password'),
  obscureText: true,
)

 

위 코드는 비밀번호 입력을 위한 TextField를 생성합니다. obscureText: true 속성을 사용하여 입력된 텍스트를 숨깁니다.

5. 텍스트 스타일링

TextField의 텍스트 스타일을 변경하려면 style 속성을 사용합니다.

 

TextField(
  decoration: InputDecoration(labelText: 'Enter your name'),
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18,
  ),
)

 

위 코드는 입력된 텍스트의 색상을 파란색으로, 글꼴 크기를 18로 설정합니다.

6. 입력 형식 제어

TextField의 입력 형식을 제어하려면 keyboardType 속성을 사용합니다. 예를 들어, 숫자 입력만 허용하려면 TextInputType.number를 사용할 수 있습니다.

 

TextField(
  decoration: InputDecoration(labelText: 'Enter your phone number'),
  keyboardType: TextInputType.number,
)

 

위 코드는 전화번호 입력을 위한 TextField를 생성하며, 숫자 키보드가 표시됩니다.

7. 포커스 제어

FocusNode를 사용하여 TextField의 포커스를 제어할 수 있습니다. 이를 통해 특정 조건에서 자동으로 포커스를 설정하거나 해제할 수 있습니다.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final FocusNode _focusNode = FocusNode();

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Demo')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              TextField(
                focusNode: _focusNode,
                decoration: InputDecoration(labelText: 'Enter your name'),
              ),
              ElevatedButton(
                onPressed: () {
                  FocusScope.of(context).requestFocus(_focusNode);
                },
                child: Text('Focus TextField'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드는 버튼을 눌렀을 때 TextField에 포커스를 설정합니다.

8. 입력값 초기화 및 리셋

입력값을 초기화하거나 리셋하려면 TextEditingController의 clear 메서드를 사용합니다.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Demo')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              TextField(
                controller: _controller,
                decoration: InputDecoration(labelText: 'Enter your name'),
              ),
              ElevatedButton(
                onPressed: () {
                  _controller.clear();
                },
                child: Text('Clear Text'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드는 버튼을 눌렀을 때 TextField의 입력값을 초기화합니다.

결론

TextField 위젯은 Flutter 애플리케이션에서 사용자 입력을 처리하는 데 매우 유용한 도구입니다. 기본 사용법부터 입력값 처리, 컨트롤러 사용, 비밀번호 입력, 텍스트 스타일링, 입력 형식 제어, 포커스 제어, 입력값 초기화 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. TextField를 적절히 활용하여 직관적이고 효율적인 입력 양식을 제공하는 애플리케이션을 만들어보세요.