[flutter] 플러터에서 Tooltip을 사용하여 웹 링크 정보 제공하기
플러터에서 Tooltip을 사용하여 웹 링크 정보를 제공하는 방법에 대해 알아보겠습니다. Tooltip 위젯은 사용자가 특정 위젯을 길게 누르거나 커서를 올렸을 때 해당 위젯의 설명을 보여주는 데 사용됩니다. 웹 링크 정보를 제공하기 위해서는 GestureDetector와 URL 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로 이동할 수 있습니다.
웹 링크 정보 제공을 위해 Tooltip과 GestureDetector를 사용하는 방법에 대해 알아보았습니다. 원하는 웹 브라우저로 사용자를 연결하여 더 나은 사용자 경험을 제공할 수 있습니다.