[flutter] 플러터 Column을 이용한 테이블 구성하기

20 Dec 2023

flutter

플러터(Flutter)를 사용하여 앱을 개발할 때 자주 사용되는 요소 중 하나는 데이터를 테이블로 구성하는 것입니다. 이때 Column을 사용하여 테이블 형태의 UI를 만들 수 있습니다. 이번 글에서는 Column을 사용하여 간단한 테이블을 만드는 방법에 대해 살펴보겠습니다.

Column은 세로 방향으로 위젯을 배열하는 데 사용되며, 주로 리스트나 테이블과 같은 구조를 구성할 때 활용됩니다. 각각의 자식 Widget은 수직으로 쌓이게 됩니다.

Column(
  children: <Widget>[
    // 자식 위젯들
  ],
)

테이블 구성하기

아래는 플러터에서 Column을 사용하여 간단한 테이블을 만드는 예시입니다.

Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(
          child: Container(
            height: 40,
            color: Colors.blue,
            child: Center(child: Text('Header 1')),
          ),
        ),
        Expanded(
          child: Container(
            height: 40,
            color: Colors.blue,
            child: Center(child: Text('Header 2')),
          ),
        ),
        Expanded(
          child: Container(
            height: 40,
            color: Colors.blue,
            child: Center(child: Text('Header 3')),
          ),
        ),
      ],
    ),
    Row(
      children: <Widget>[
        Expanded(
          child: Container(
            height: 40,
            color: Colors.lightBlue,
            child: Center(child: Text('Data 1')),
          ),
        ),
        Expanded(
          child: Container(
            height: 40,
            color: Colors.lightBlue,
            child: Center(child: Text('Data 2')),
          ),
        ),
        Expanded(
          child: Container(
            height: 40,
            color: Colors.lightBlue,
            child: Center(child: Text('Data 3')),
          ),
        ),
      ],
    ),
    // 나머지 데이터 행들
  ],
)

위 예시에서는 Column 내에 Row를 사용하여 각각의 행을 구성하고, Expanded를 이용하여 각 셀이 동일한 너비를 가지도록 설정했습니다.

결론

Column을 사용하여 간단한 테이블 형태의 UI를 만들 수 있습니다. 이 외에도 확장하여 더 복잡한 테이블을 만들 수 있으며, 필요에 따라 데이터를 동적으로 표시하는 방법 등을 추가할 수 있습니다.

이상으로, Column을 이용한 플러터 테이블 구성에 대해 알아보았습니다. 감사합니다!

참고 문서

Column Widget

테이블 구성하기

결론