[flutter] 플러터에서 Tooltip을 사용하여 웹 링크 정보 제공하기

플러터에서 Tooltip을 사용하여 웹 링크 정보를 제공하는 방법에 대해 알아보겠습니다. Tooltip 위젯은 사용자가 특정 위젯을 길게 누르거나 커서를 올렸을 때 해당 위젯의 설명을 보여주는 데 사용됩니다. 웹 링크 정보를 제공하기 위해서는 GestureDetectorURL Launcher 라이브러리를 함께 사용할 수 있습니다.

프로젝트에 URL Launcher 라이브러리 추가하기

먼저, pubspec.yaml 파일에 다음과 같이 url_launcher 라이브러리를 추가합니다.

dependencies:
  url_launcher: ^6.0.3

그리고 터미널에서 다음 명령을 실행하여 의존성을 가져옵니다.

flutter pub get

GestureDetector 및 Tooltip 사용하기

다음으로, 웹 링크 정보를 제공할 위젯을 만들고 그 위젯을 GestureDetector로 래핑합니다. 그리고 onTap 콜백을 사용하여 특정 URL을 열 수 있도록 합니다.

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

class LinkInfoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _launchURL('https://www.example.com');
      },
      child: Tooltip(
        message: '방문하기',
        child: Icon(Icons.link),
      ),
    );
  }

  _launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

위 코드에서 LinkInfoWidget은 웹 링크 정보를 제공하는데 사용됩니다. GestureDetector로 감싸진 이유는 클릭 또는 터치 동작을 감지하기 위함입니다. 그리고 Tooltip 위젯은 아이콘 위에 마우스를 놓았을 때 ‘방문하기’라는 메시지를 표시합니다.

위의 코드를 적용하면 사용자가 해당 아이콘 위에 마우스를 올릴 때 ‘방문하기’라는 툴팁이 나타나며, 클릭 시 해당 URL로 이동할 수 있습니다.

웹 링크 정보 제공을 위해 TooltipGestureDetector를 사용하는 방법에 대해 알아보았습니다. 원하는 웹 브라우저로 사용자를 연결하여 더 나은 사용자 경험을 제공할 수 있습니다.