[flutter] 플러터 Table 위젯에서 특정 셀에 버튼 추가하기

15 Dec 2023

flutter

플러터의 Table 위젯은 데이터를 테이블 형식으로 표시할 수 있도록 해줍니다. 테이블의 각 셀에 버튼을 추가하는 방법에 대해 알아보겠습니다.

Table 위젯 생성하기

먼저 Table 위젯을 생성합니다. 이 예시에서는 3x3 크기의 테이블을 생성하겠습니다.

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      children: [
        // 셀 내용 추가
      ],
    ),
    TableRow(
      children: [
        // 셀 내용 추가
      ],
    ),
    TableRow(
      children: [
        // 셀 내용 추가
      ],
    ),
  ],
)

버튼을 셀에 추가하기

각 셀에 버튼을 추가하려면 TableCell 위젯을 사용해야 합니다. 다음은 버튼을 포함한 셀을 생성하는 예시입니다.

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      children: [
        TableCell(
          child: Center(child: ElevatedButton(onPressed: () {}, child: Text('Button'))),
        ),
        // 다른 셀에도 버튼 추가
        TableCell(
          child: Center(child: ElevatedButton(onPressed: () {}, child: Text('Button'))),
        ),
      ],
    ),
    // 다른 행에도 셀 추가
    TableRow(
      children: [
        // 셀 내용 추가
      ],
    ),
    // 나머지 행 같은 방식으로 추가
  ],
)

위 예시에서 TableCell을 사용하여 각 셀에 버튼을 추가했습니다.

이제 이 테이블을 빌드하면 각 셀에 버튼이 표시되는 것을 확인할 수 있습니다.

결론

이렇게하면 Table 위젯의 각 셀에 버튼을 추가할 수 있습니다. 이를 통해 데이터를 효율적으로 표시하고 사용자와의 상호작용을 향상시킬 수 있습니다.

포괄적인 내용을 적절하게 다뤄주신 flutter.dev와 Medium의 게시물들을 참고하시길 권장합니다.