[flutter] 플러터 Row 위젯을 이용한 헤더 만들기

이번에는 플러터의 Row 위젯을 이용해서 간단한 헤더를 만들어보겠습니다. Row 위젯은 수평 방향으로 자식 위젯들을 배치하는데 사용됩니다.

Row 위젯 생성하기

먼저, Row 위젯을 생성하여 헤더의 레이아웃을 구성합니다. 다음과 같이 코드를 작성해 보겠습니다.

Row(
    children: [
        Text('Logo'),
        Text('Home'),
        Text('About'),
        Text('Contact'),
    ],
)

위 코드에서는 Row 위젯을 생성하고, children 속성을 이용하여 자식 위젯들을 나열합니다. 각각의 자식 위젯은 Text 위젯으로 구성되어 있으며, 헤더에 표시될 내용을 나타냅니다.

각 위젯 스타일링하기

이제 생성한 Row 위젯의 자식 위젯들에 대해 스타일을 지정해보겠습니다. 아래의 예제 코드를 참고하여 스타일을 적용해 보세요.

Row(
    children: [
        Text(
            'Logo',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
            ),
        ),
        Text(
            'Home',
            style: TextStyle(
                fontSize: 16,
                color: Colors.black,
            ),
        ),
        Text(
            'About',
            style: TextStyle(
                fontSize: 16,
                color: Colors.black,
            ),
        ),
        Text(
            'Contact',
            style: TextStyle(
                fontSize: 16,
                color: Colors.black,
            ),
        ),
    ],
)

위 코드에서는 style 속성을 이용하여 각 Text 위젯의 스타일을 적용합니다. 예를 들어, Logo 텍스트는 20포인트의 크기와 굵은 글꼴, 파란색으로 지정되어 있습니다.

결과 확인하기

위의 코드를 앱의 body에 삽입하여 실행해보세요. 자식 위젯들이 수평으로 정렬되어 헤더가 만들어진 것을 확인할 수 있을 것입니다.

결론

플러터의 Row 위젯을 사용하여 간단한 헤더를 만드는 방법에 대해 알아보았습니다. 자식 위젯을 나열하여 수평으로 배치하고, 각 위젯에 스타일을 적용할 수 있습니다. 이를 활용하여 다양한 레이아웃을 구성할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하세요.