[Flutter] linkify와 url_launcher로 텍스트와 링크 연결하기

linkify 개념

: 텍스트 URL과 이메일을 Flutter용 텍스트의 클릭 가능한 인라인 링크로 바꿔준다.

linkify 설치하기

pubspec.yaml파일에 들어가서 종속성에서 다음 항목을 추가해준다. 항상 말하지만 들여쓰기를 주의해야 한다.

dependencies:
  flutter_linkify: ^5.0.2

사용하기

import 'package:flutter_linkify/flutter_linkify.dart';

Linkify(
  onOpen: (link) => print("Clicked ${link.url}!"),
  text: "Made by <https://cretezy.com>",
);

url_launcher 개념

: 브라우저/OS에서 링크를 열 수 있도록 도와준다.

url_launcher 설치하기

dependencies:
  url_launcher: 

사용하기

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

final Uri _url = Uri.parse('<https://flutter.dev>');

void main() => runApp(
      const MaterialApp(
        home: Material(
          child: Center(
            child: ElevatedButton(
              onPressed: _launchUrl,
              child: Text('Show Flutter homepage'),
            ),
          ),
        ),
      ),
    );

Future _launchUrl() async {
  if (!await launchUrl(_url)) {
    throw Exception('Could not launch $_url');
  }
}

linkify와 url_launcher로 텍스트와 링크 연결하기

flutter에서 flutter_linkify와 url_launcher를 사용하여 텍스트와 링크를 연결할 수 있다. flutter_linkify는 텍스트 URL과 이메일을 클릭 가능한 인라인 링크로 바꿔주고, url_launcher는 브라우저나 OS에서 링크를 열 수 있도록 도와준다.

예시)

import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher.dart';

Linkify(
  onOpen: (link) async {
    if (await canLaunch(link.url)) {
        await launch(link.url);
      } else {
        throw 'Could not launch $link';
      }
  },
  text: "Made by <https://cretezy.com>",
  style: TextStyle(color: Colors.yellow),
  linkStyle: TextStyle(color: Colors.red),
);

위 코드에서는 flutter_linkify로 "Made by https://cretezy.com"을 인라인 링크로 바꾸고, url_launcher로 해당 링크를 클릭하면 해당 웹사이트로 이동한다.

활용하기

import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher.dart';

Linkify(
         onOpen: (link) async {
          if (await canLaunch(link.url)) {
                  await launch(link.url);
                }
              },
              text: '<https://github.com/Uheeking>',
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
              linkStyle: const TextStyle(color: Colors.white),
            );

위와 같이 예시를 사용하여 텍스트를 인라인 링크로 바꾸고 해당 링크를 클릭시에 깃허브사이트로 이동할 수 있게 구현하였다. style과 linkStyle은 자신의 기호에 맞게 변경하면 된다.

결과물

결과물

🔗 참고

https://pub.dev/packages/flutter_linkify