Flutter는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로, 여러 가지 위젯을 조합하여 UI를 구성할 수 있습니다. 이 중에서 Row는 수평으로 여러 위젯을 배치하는 데 사용되며, 이 글에서는 Row 위젯 내에서 텍스트 필드를 사용하는 방법을 알아보겠습니다.

1. 텍스트 필드 위젯 생성하기

먼저, 텍스트 필드 위젯을 생성해야 합니다. Flutter에서는 TextField 위젯을 사용하여 텍스트 필드를 만들 수 있습니다.

TextField(
  decoration: InputDecoration(
    labelText: '이름',
  ),
),

위 예제에서는 TextField 위젯을 생성하고, decoration 속성을 사용하여 텍스트 필드의 외관을 설정합니다. 여기서는 labelText 속성을 사용하여 텍스트 필드의 라벨을 지정하였습니다.

2. Row 위젯에 텍스트 필드 추가하기

다음으로, Row 위젯을 사용하여 여러 개의 위젯을 수평으로 배치할 수 있습니다. 텍스트 필드를 포함한 여러 위젯을 children 속성에 배열로 전달하여 Row 위젯을 생성할 수 있습니다.

Row(
  children: [
    TextField(
      decoration: InputDecoration(
        labelText: '이름',
      ),
    ),
    TextField(
      decoration: InputDecoration(
        labelText: '이메일',
      ),
    ),
    TextField(
      decoration: InputDecoration(
        labelText: '전화번호',
      ),
    ),
  ],
)

위 예제에서는 Row 위젯의 children 속성에 세 개의 텍스트 필드 위젯을 배열로 전달하였습니다. 이렇게 하면 세 개의 텍스트 필드가 수평으로 배치되어 화면에 표시됩니다.

3. 텍스트 필드 위젯에 스타일 적용하기

마지막으로, 텍스트 필드 위젯에 스타일을 적용하여 외관을 변경할 수 있습니다. 예를 들어, 텍스트 필드의 배경색이나 글자색을 변경하고 싶은 경우 아래와 같이 스타일을 설정할 수 있습니다.

TextField(
  style: TextStyle(
    color: Colors.red,
  ),
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.blue,
    labelText: '이름',
  ),
),

위 예제에서는 style 속성을 사용하여 글자색을 빨간색으로, decoration 속성을 사용하여 배경색을 파란색으로 변경하였습니다.

결론

Flutter의 Row 위젯을 사용하여 텍스트 필드를 수평으로 배치하는 방법에 대해 알아보았습니다. 텍스트 필드의 외관을 설정하거나 스타일을 적용하여 UI를 원하는 대로 조정할 수 있습니다. 이를 통해 더 유연하고 다양한 모양의 앱을 개발할 수 있습니다.

참고: Flutter 공식 문서