TextField란?
https://api.flutter.dev/flutter/material/TextField-class.html
공식 문서에는 "텍스트 필드를 사용하면 사용자는 하드웨어 키보드나 화면 키보드를 사용하여 텍스트를 입력할 수 있습니다." 라고 적혀있습니다.
즉, 사용자로부터 텍스트 입력을 받을 수 있는 가장 기본적인 위젯으로 앱에서 검색창, 로그인 창 등 다양한 입력폼에서 활용되고 있습니다.
아래에서는 TextField의 기본적인 사용법부터 주요 속성, 디자인 커스터마이징 방법까지 알아보겠습니다.
기본예제로
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('TextField Example')),
body: const Padding(
padding: EdgeInsets.all(16.0),
child: TextField(
decoration: InputDecoration(
labelText: 'Enter your text',
border: OutlineInputBorder(),
),
),
),
),
);
}
}
이 예제에서는 TextField 위젯을 사용해 단순한 텍스트 입력 창을 만들고 InputDecoration을 통해 텍스트 필드의 레이블과 테두리를 설정하여 기본적인 스타일을 구성했습니다.
실제 코드 TextField 의 레퍼런스를 확인해보면 다양한 속성들이 있으며 디자인, 사용자 편의성을 향상시킬수 있는 옵션들이 있습니다. 오늘은 대표적인 속성들만 알아보겠습니다.
controller
final TextEditingController _controller = TextEditingController();
TextField(
controller: _controller,
);
// 버튼을 눌렀을 때 텍스트 초기화
ElevatedButton(
onPressed: () {
_controller.clear();
},
child: Text('Clear Text'),
);
- TextEditingController는 TextField의 텍스트를 제어하고 관리할 수 있도록 하는 속성입니다.
- 텍스트를 읽거나 초기 값을 설정하고, 외부에서 TextField의 텍스트를 변경할 수도 있습니다.
- controller를 사용하면 텍스트 입력 상태에 대한 실시간 모니터링이나 특정 버튼 클릭 시 텍스트를 초기화하는 기능 등을 구현할 수 있습니다.
decoration
TextField(
decoration: InputDecoration(
labelText: 'Username',
hintText: 'Enter your username',
icon: Icon(Icons.person),
prefixIcon: Icon(Icons.account_circle),
suffixIcon: Icon(Icons.check_circle),
border: OutlineInputBorder(),
errorText: 'Invalid username',
),
);InputDecoration을 통해 TextField의 스타일과 디자인을 정의합니다.
- labelText: 필드의 제목을 표시합니다. 사용자가 입력을 시작하면 위로 이동하여 필드의 제목('Username' 부분) 역할을 합니다.
- hintText: 입력 전 필드 안에 예시 텍스트를 표시하여 사용자가 입력할 내용을 유추할 수 있도록 돕습니다.('Enter your username')
- icon: 필드 외부 왼쪽에 표시되는 아이콘입니다. 일반적으로 필드의 전체적인 기능을 나타냅니다.('텍스트 필드 좌측 아이콘')
- prefixIcon: 필드 내부 왼쪽에 표시되는 아이콘입니다.
- suffixIcon: 필드 내부 오른쪽에 표시되는 아이콘으로 입력 검증 결과나 기타 정보를 표시할 때 유용합니다.
- border: 필드의 테두리 스타일을 정의합니다. 이 예제에서는 기본 외곽선이 적용됩니다.
- errorText: 필드에 오류가 발생했을 때 아래쪽에 표시되는 오류 메시지입니다.
keyboardType
keyboardType은 사용자가 어떤 종류의 입력을 할지를 결정하는 속성입니다.
이메일 주소를 입력할 때는 TextInputType.emailAddress, 숫자 입력 필드에는 TextInputType.number를 설정하여 사용자가 더 편리하게 입력할 수 있도록 합니다.
- 지원되는 키보드 타입에는 텍스트, 멀티라인, 전화번호, 이메일, URL 등이 있습니다.
obscureText
- obscureText를 true로 설정하면 입력된 텍스트가 마스킹 처리되어 비밀번호와 같은 민감한 정보를 입력하는 필드에서 사용됩니다.
- TextField가 텍스트 대신 원형 또는 별표 기호를 표시하게 되어 비밀번호 입력 필드 구현 시 유용합니다.
TextField(
obscureText: true,
);
obscureText값을 true로 설정하면 위 사진과 같이 텍스트필드에 입력을 하게 되면 마스킹 처리된것을 확인 할 수 있습니다.
maxLength
- 최대 입력 가능 글자 수를 제한하는 속성으로 기본적으로 텍스트 필드 아래에 제한된 글자 수가 표시됩니다.
- 너무 많은 글자 수가 입력되는 것을 방지할 때 유용하며 제한이 초과되면 더 이상 텍스트를 입력할 수 없습니다.
TextField(
maxLength: 10,
);
- int값으로 글자수를 제한합니다.
onChanged
- 사용자가 텍스트를 입력하거나 삭제할 때마다 호출되는 콜백 함수로 TextField의 내용을 실시간으로 처리할 수 있습니다.
- 검색 필드나 실시간 입력 검증 등에 활용할 수 있습니다.
TextField(
onChanged: (text) {
print("Current text: $text");
},
);
-
onChanged는 TextField 내의 입력 변화를 실시간으로 추적하여 즉각적인 반응을 필요로 하는 다양한 UI와 로직을 구현하는 데 중요한 역할을 합니다.
-
ValueChanged는 Flutter에서 사용되는 콜백 함수 타입 중 하나로 입력된 값을 변경할 때 호출하는 콜백 함수의 형식을 정의하는 타입입니다. 이 타입은 단일 인수(T)를 받고 반환값이 없는 함수 형태를 나타냅니다.
-
예를 들어, ValueChanged은 String 타입의 변화를 처리하는 함수 타입을 의미합니다. 이 콜백 함수는 입력을 받을 때마다 실행되며 이를 통해 입력된 값을 기반으로 UI를 즉시 업데이트하거나 데이터 변경을 처리할 수 있게 해 줍니다.
onSubmitted
- 사용자가 텍스트 입력을 완료하고 키보드의 완료 버튼을 눌렀을 때 호출되는 콜백 함수입니다.
- 사용자 입력이 완료된 이후에 처리할 작업이 있을 때 사용되며, 검색이나 입력 제출 처리에 적합합니다.
TextField(
onSubmitted: (text) {
print("Submitted text: $text");
},
);
* 우측 하단에 done 버튼을 클릭하면 onSubmitted의 text의 마지막으로 입력된 값까지 출력하게 된다.
style
- 입력 텍스트의 글꼴, 크기, 색상 등을 설정할 수 있는 TextStyle 속성입니다.
- 입력 텍스트를 눈에 띄게 하거나 특정 스타일을 적용해야 할 때 유용합니다.
이 글에서는 TextField의 주요 속성들과 예제들을 통해 간략적으로 다뤄보았습니다. 이러한 속성들을 이해하고 활용한다면 사용자 경험을 개선하고 보다 효율적이고 입력 폼을 설계하는 데 큰 도움이 될 것입니다.
