Flutter에서는 Row 위젯을 사용하여 가로로 여러 개의 위젯을 배치할 수 있습니다. 이 글에서는 Row 위젯 내에서 입력 폼을 디자인하는 방법에 대해서 알아보겠습니다.
1. TextFormField 위젯 사용하기
입력 폼을 디자인하기 위해 TextFormField 위젯을 사용할 수 있습니다. TextFormField 위젯은 텍스트를 입력하는 데 사용되며, 힌트 텍스트, 라벨, 밸리데이션 등 다양한 기능을 제공합니다.
아래는 TextFormField를 사용하여 이메일 입력 폼을 디자인하는 예제 코드입니다.
Row(
children: [
Expanded(
child: TextFormField(
decoration: InputDecoration(
labelText: '이메일',
hintText: 'example@example.com',
),
),
),
],
),
2. 커스텀 입력 폼 디자인하기
만약 기본적인 TextFormField의 스타일이 마음에 들지 않는다면, 커스텀 입력 폼을 디자인할 수 있습니다. Row 위젯 내에서 각각의 입력 폼 요소를 따로 설계하여 배치할 수 있습니다.
아래 예제 코드는 이메일과 비밀번호 입력 폼을 디자인하는 방법을 보여줍니다.
Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: TextFormField(
decoration: InputDecoration(
labelText: '이메일',
hintText: 'example@example.com',
),
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: '비밀번호',
hintText: '********',
),
),
),
),
],
),
위 코드에서는 TextFormField를 감싸는 Container 위젯을 사용하여 입력 폼의 스타일을 설정하고, padding을 사용하여 여백을 추가하였습니다.
3. 입력 폼의 상태 관리하기
Flutter에서 입력 폼의 상태를 관리하기 위해서는 GlobalKey나 Form 위젯을 사용할 수 있습니다.
GlobalKey를 사용하는 예제 코드는 다음과 같습니다.
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Row(
children: [
Expanded(
child: Form(
key: _formKey,
child: TextFormField(
// 입력 폼의 구현 코드
),
),
),
],
),
Form 위젯을 사용하는 예제 코드는 다음과 같습니다.
Row(
children: [
Expanded(
child: Form(
child: TextFormField(
// 입력 폼의 구현 코드
),
),
),
],
),
위 코드에서는 Form 위젯을 사용하여 입력 폼의 상태를 관리합니다. Form 위젯의 자식으로 TextFormField를 사용하고, 필요한 밸리데이션 등을 설정할 수 있습니다.
결론
Flutter에서 Row 위젯을 사용하여 입력 폼을 디자인하는 방법에 대해서 알아보았습니다. TextFormField를 이용하여 기본적인 폼 요소를 사용하거나, 커스텀 입력 폼을 디자인할 수 있습니다. 또한 GlobalKey나 Form 위젯을 사용하여 입력 폼의 상태를 관리할 수 있습니다.
참고 자료: