플러터 Nested Column & Row 가이드: 중첩 레이아웃 완벽 이해하기

 

플러터(Flutter)는 강력한 UI 툴킷으로, 다양한 레이아웃을 유연하게 구성할 수 있습니다.

그중에서도 Column과 Row 위젯은 각각 수직 및 수평 방향으로 자식 위젯을 배치하는 데 사용됩니다.

하지만 더 복잡한 레이아웃을 구성하려면 이 두 위젯을 중첩하여 사용하는 것이 매우 유용합니다.

이번 포스트에서는 Flutter에서 Nested Column과 Nested Row 위젯을 사용하는 방법과 주요 옵션에 대해 알아보겠습니다.

Nested Column과 Row 위젯이란?

Nested Column과 Nested Row는 하나의 Column 또는 Row 위젯 안에 또 다른 Column 또는 Row 위젯을 포함하는 구조를 의미합니다.

 

이를 통해 수직 및 수평 배치를 동시에 적용할 수 있으며, 복잡한 레이아웃을 간결하고 효율적으로 구현할 수 있습니다.

Nested Column과 Row 위젯 기본 사용법

Nested Column과 Row 위젯을 사용하면 다차원적인 레이아웃을 쉽게 관리할 수 있습니다.

예를 들어, 하나의 Row 안에 여러 Column을 중첩하거나, 반대로 Column 안에 여러 Row를 중첩할 수 있습니다.

코드 예시 1: Row 안에 Column 중첩

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('Nested Column in Row Example')),
        body: Row(
          children: [
            Column(
              children: [
                Text('Column 1, Item 1'),
                Text('Column 1, Item 2'),
              ],
            ),
            Column(
              children: [
                Text('Column 2, Item 1'),
                Text('Column 2, Item 2'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 하나의 Row 안에 두 개의 Column이 중첩되어 있으며, 각각의 Column 안에는 여러 개의 텍스트 위젯이 배치됩니다.

코드 예시 2: Column 안에 Row 중첩

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('Nested Row in Column Example')),
        body: Column(
          children: [
            Row(
              children: [
                Text('Row 1, Item 1'),
                Text('Row 1, Item 2'),
              ],
            ),
            Row(
              children: [
                Text('Row 2, Item 1'),
                Text('Row 2, Item 2'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

이 코드는 하나의 Column 안에 두 개의 Row가 중첩되어 있으며, 각각의 Row 안에 여러 개의 텍스트 위젯이 수평으로 배치됩니다.

Nested Column과 Row에서 사용할 수 있는 주요 옵션

Nested Column과 Row 구조에서 사용할 수 있는 몇 가지 유용한 옵션을 알아보겠습니다.

1. mainAxisAlignment & crossAxisAlignment

Column과 Row에서 각각 수직 및 수평 정렬을 설정할 수 있습니다.

Nested 구조에서는 부모와 자식 모두에게 개별적으로 설정할 수 있습니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Text('Start-aligned Column, Evenly Row'),
        Text('Item 2'),
      ],
    ),
  ],
),

2. Expanded 위젯

공간을 동적으로 분배하고자 할 때, Expanded 위젯을 활용하여 각각의 위젯이 사용 가능한 공간을 최대로 활용하도록 만들 수 있습니다.

Row(
  children: [
    Expanded(
      child: Column(
        children: [
          Text('Expanded Column, Item 1'),
          Text('Expanded Column, Item 2'),
        ],
      ),
    ),
    Expanded(
      child: Column(
        children: [
          Text('Expanded Column, Item 3'),
          Text('Expanded Column, Item 4'),
        ],
      ),
    ),
  ],
),

3. Flexible 위젯

Flexible 위젯을 사용하여 위젯의 크기를 유연하게 조정할 수 있습니다.

이는 특정 위젯의 크기가 다른 위젯에 의해 영향을 받지 않도록 합니다.

Column(
  children: [
    Flexible(
      child: Row(
        children: [
          Text('Flexible Row, Item 1'),
          Text('Flexible Row, Item 2'),
        ],
      ),
    ),
    Text('Item after Flexible Row'),
  ],
),

Nested Column과 Row 사용 시 주의사항

• 레이아웃 오버플로우: Nested Column과 Row를 사용하다 보면 화면을 넘어서는 오버플로우가 발생할 수 있습니다. 이 경우 SingleChildScrollView 위젯을 사용하여 스크롤이 가능하도록 만드는 것이 좋습니다.
• 가독성: 중첩된 구조가 깊어질수록 코드의 가독성이 떨어질 수 있습니다. 복잡한 레이아웃의 경우, 코드를 위젯으로 분리하여 관리하는 것이 권장됩니다.

Nested Column과 Row의 실제 사례

Flutter에서 다단계 레이아웃을 구성하거나, 복잡한 UI를 간결하게 만들 때 Nested Column과 Row를 사용하면 매우 유용합니다. 예를 들어, 카드형 디자인의 대시보드 레이아웃이나 입력 필드, 버튼을 포함하는 양식 등을 설계할 때 활용할 수 있습니다.

코드 예시: 대시보드 레이아웃

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('Dashboard Layout')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Icon(Icons.dashboard, size: 50, color: Colors.blue),
                      Text('Dashboard Item 1'),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      Icon(Icons.analytics, size: 50, color: Colors.green),
                      Text('Dashboard Item 2'),
                    ],
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Icon(Icons.account_circle, size: 50, color: Colors.orange),
                      Text('Dashboard Item 3'),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      Icon(Icons.settings, size: 50, color: Colors.red),
                      Text('Dashboard Item 4'),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

Nested Column과 Nested Row 위젯을 활용하면 Flutter에서 복잡한 레이아웃을 간편하고 효율적으로 구성할 수 있습니다.

이 포스트를 통해 Nested Column과 Row의 사용법을 이해하고, 다차원적인 레이아웃을 설계하는 데 활용해 보세요!

 

공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱