[flutter] DataTable에서 특정 셀에 하이퍼링크 추가하는 방법

18 Dec 2023

flutter

소개
DataTable에 하이퍼링크 추가하기
요약

소개

Flutter에서 데이터를 표 형식으로 표시하려면 DataTable 위젯을 사용합니다. 이 위젯은 테이블 형태로 데이터를 나타내고 사용자가 특정 셀을 선택할 수 있도록 합니다.

이 글에서는 DataTable의 특정 셀에 하이퍼링크를 추가하는 방법에 대해 알아보겠습니다.

DataTable에 하이퍼링크 추가하기

DataTable의 셀에 하이퍼링크를 추가하려면 해당 셀을 위젯으로 표시하고 이 위젯이 터치되었을 때 하이퍼링크를 실행할 수 있도록 해야 합니다.

아래는 간단한 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('하이퍼링크 추가 예시')),
        body: Center(
          child: DataTable(
            columns: const <DataColumn>[
              DataColumn(label: Text('이름')),
              DataColumn(label: Text('프로필')),
            ],
            rows: const <DataRow>[
              DataRow(cells: <DataCell>[
                DataCell(Text('홍길동')),
                DataCell(LinkText('프로필 보기', 'https://example.com/profile')),
              ]),
              DataRow(cells: <DataCell>[
                DataCell(Text('아무개')),
                DataCell(LinkText('프로필 보기', 'https://example.com/profile')),
              ]),
            ],
          ),
        ),
      ),
    );
  }
}

class LinkText extends StatelessWidget {
  final String text;
  final String url;

  const LinkText(this.text, this.url);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Text(text, style: TextStyle(decoration: TextDecoration.underline)),
      onTap: () => launch(url),
    );
  }
}

위의 예제에서 LinkText 위젯은 InkWell 위젯으로 감싸져 있으며, 클릭 시 url_launcher 패키지를 사용하여 주어진 URL을 엽니다. DataTable의 특정 셀에서만 이러한 하이퍼링크를 사용하려면 해당 셀을 위젯으로 직접 구성해야 합니다.

요약

Flutter에서 DataTable의 특정 셀에 하이퍼링크를 추가하는 방법에 대해 알아보았습니다. 위 예시 코드를 참고하여 데이터 테이블의 특정 셀에 사용자 정의 링크를 추가하는 방법을 알아보세요.