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

15 Dec 2023

flutter

플러터에서 Table 위젯은 데이터를 행과 열의 형태로 표시하기에 좋은 방법입니다. 하지만 때때로, 특정 셀에 링크를 추가해야 할 수도 있습니다. 이때 어떤 방법으로 구현할 수 있는지 알아보겠습니다.

1. InkWell을 이용한 링크 구현

간단한 방법은 InkWell 위젯을 사용하여 특정 셀에 클릭 가능한 기능을 추가하는 것입니다. 아래는 이를 구현한 예시입니다.

Table(
  children: [
    TableRow(
      children: [
        InkWell(
          onTap: () {
            // 링크를 클릭했을 때 실행할 동작 구현
          },
          child: TableCell(
            child: Text('링크 텍스트'),
          ),
        ),
        TableCell(
          child: Text('기타 데이터'),
        ),
      ],
    ),
  ],
)

2. GestureDetector와 Navigator를 이용한 링크 구현

이전 방법과는 달리, Navigator를 이용하여 새로운 화면으로 이동하는 링크를 구현할 수 있습니다.

Table(
  children: [
    TableRow(
      children: [
        GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => NewPage()),
            );
          },
          child: TableCell(
            child: Text('링크 텍스트'),
          ),
        ),
        TableCell(
          child: Text('기타 데이터'),
        ),
      ],
    ),
  ],
)

이와 같이, 플러터 Table 위젯에서 특정 셀에 링크를 추가하는 방법은 다양합니다. 적절한 방법을 선택하여 프로젝트에 맞게 구현할 수 있습니다.

더 많은 정보를 원하시면 아래 레퍼런스를 참고하시기 바랍니다.

그럼 좋은 시간 보내세요!