[Widget] DataTable을 활용하여 깔끔하게 표 형식으로 나타내기

개발을 진행하면서 List를 뿌려주거나 깔끔하게 표현해주고자 할때 DataTable을 사용하면 된다.

아래는 간단한 예시이다.

Datatable 사용 예시

DataTable(columns: columns, rows: rows)

DataTable은 column과 rows로 구성되어 있다.

column은 Header 값, 즉 최상단에 위치한 제목이라고 생각하면 이해하기 쉽다.

rows는 Body 값, 제목 안에 들어있는 데이터 내용이라 생각하면 될 듯 하다.

나같은 경우 Datatable을 그릴때 Container 내에 그린다. 그래야 width, height 값을 주기 편하기 때문이다.

DataTable 내에는 많은 속성값들이 있는데 나는 horizontalMargin, columnSpacing 두 가지를 주로 사용한다.

horizontalMargin 같은 경우, 말 그대로 margin 값이다. DataTable을 생성하고 빈 공간에 margin 값을 주기 위해 사용된다.

columnSpacing  같은 경우, column 간의 간격이라고 생각하면 이해하기 쉽다.

그 이후는 간단하다. column은 DataColumn으로 감싸면 되고, rows는 DateRow로 감싼 뒤, DateCell로 뿌려주면 된다.

 

DataTable(
  horizontalMargin: 5.0, // margin
  columnSpacing: 20.0, // column 간격
  columns: [
    DataColumn(
        label: Text('이름',
            textScaleFactor: 2.0,
            style:
                TextStyle(color: Colors.black, fontSize: 9))),
    DataColumn(
        label: Text("나이",
            textScaleFactor: 2.0,
            style:
                TextStyle(color: Colors.black, fontSize: 9))),
    DataColumn(
        label: Text('연락처',
            textScaleFactor: 2.0,
            style:
                TextStyle(color: Colors.black, fontSize: 9))),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Center(
          child: Text(
        "홍길동",
        textScaleFactor: 2.0,
        style: TextStyle(fontSize: 9, color: Colors.black),
      ))),
      DataCell(Center(
          child: Text(
        "25",
        textScaleFactor: 2.0,
        style: TextStyle(fontSize: 9, color: Colors.black),
      ))),
      DataCell(Center(
          child: Text(
        "010-1234-5678",
        textScaleFactor: 2.0,
        style: TextStyle(fontSize: 9, color: Colors.black),
      ))),
    ]),
    DataRow(cells: [
      DataCell(Center(
          child: Text(
            "임꺽정",
            textScaleFactor: 2.0,
            style: TextStyle(fontSize: 9, color: Colors.black),
          ))),
      DataCell(Center(
          child: Text(
            "23",
            textScaleFactor: 2.0,
            style: TextStyle(fontSize: 9, color: Colors.black),
          ))),
      DataCell(Center(
          child: Text(
            "010-5678-9876",
            textScaleFactor: 2.0,
            style: TextStyle(fontSize: 9, color: Colors.black),
          ))),
    ])
  ],
),

코드는 이러하다. DateTable은 사용하는 사람에 따라 활용성이 무궁무진하다. 나같은 경우도 실제로 배포되는 앱을 구현하는 과정에서 실제로 많은 페이지에 사용하였고 ListView 등 활용해서 저장된 데이터를 뿌려주는데에도 유용하다.

 

끝!