Flutter에서 Row 위젯은 가로 방향으로 자식 위젯을 정렬하는 데 사용됩니다. 그러나 때로는 Row 위젯 내에서 그리드 레이아웃을 구현해야 할 때가 있습니다. 이러한 경우에는 Row 위젯과 Expanded 위젯을 조합하여 그리드 레이아웃을 쉽게 구현할 수 있습니다.

Step 1: Row 내에서 Expanded 위젯 사용하기

가로 방향으로 그리드를 만들기 위해 Row 내에서 Expanded 위젯을 사용해야 합니다. Expanded 위젯은 자식 위젯이 Row 내에서 동일한 공간을 차지하도록 해주는 역할을 합니다.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
  ],
)

위의 코드는 Row 위젯 내에 Expanded 위젯을 사용하여 각각 빨간색, 초록색, 파란색의 박스를 생성합니다. Expanded 위젯은 각 박스에 동일한 가로 공간을 할당하므로 화면 전체의 가로 공간을 분할하는 그리드 레이아웃을 만들 수 있습니다.

Step 2: 그리드 셀 추가하기

만약 그리드 레이아웃을 좀 더 세분화하고 싶다면, Expanded 위젯 내에서 다른 자식 위젯을 구성하여 그리드 셀을 추가할 수 있습니다.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
  ],
)

위의 코드에서는 Expanded 위젯의 flex 속성을 사용하여 박스의 가로 공간을 조정합니다. flex 속성은 각 Expanded 위젯의 비율을 나타내며, 높은 flex 값을 가진 Expanded 위젯은 좀 더 많은 공간을 차지하게 됩니다. 이를 통해 더 세분화된 그리드 레이아웃을 구성할 수 있습니다.

결론

Flutter에서 Row 위젯 내에서 그리드 레이아웃을 구현하는 방법을 살펴보았습니다. Row 위젯과 Expanded 위젯을 조합하여 가로 방향으로 그리드 셀을 생성할 수 있습니다. 그리드를 더욱 세분화하고 싶다면 Expanded 위젯의 flex 속성을 활용할 수 있습니다.

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