[Flutter]String중에 Link 있을경우 해당 Link Click Event

splitMapJoin method - String class - dart:core library - Dart API

텍스트에서 URL 일경우에만 색변경 / 클릭시 이벤트 일반 텍스트일경우 출력만 하게 제작을 할려고했다.

단순히 URL이 있으면 모든 텍스트에 Click Event 심으면 되지만 URL이 2개 3개 그이상 일수도 있으니 각 URL에 맞는 범위에 Click Event를 심어야 했다.

Component를 하나 만든뒤 LinkStyle / NonLinkStyle 로 2가지의 TextStyle을 받은뒤 content를 받았다.

그후 splitMapJoin 을 사용하여 해당 content에 Link값이 포함되어있나 안되어있나 체크하는 로직을 제작후

하나의 List로 만들어 해당 List를 TextSpan을 통하여 출력 시켰다.

splitMapJoin ⇒ 문자열(String)을 분할(split) 시킨뒤 각 split된 함수마다 적용(Map)을 하여 다시 하나의 문자열로 결합(Join) 시키는 함수이다.

쉽게 말해 분할(split)적용(Map)결합(Join) 시키는 함수이다.(존나 이름 그대로이다.)
기본적으로 pattern(현재 예시코드 pattern의 경우 link인지 아닌지 체크하는 pattern사용),onMatch(split 시킨 문자열이 pattern에 맞을경우),onNonMatch(split 시킨 문자열이 패턴에 안맞을경우)

예시 코드

import 'package:flutter/gestures.dart';
import 'package:flutter/widgets.dart';
import 'package:url_launcher/url_launcher_string.dart';

class LinkText extends StatelessWidget {
  final String content;
  final TextStyle normalStyle;
  final TextStyle linkStyle;

  const LinkText({super.key, 
    required this.content,
    required this.normalStyle,
    required this.linkStyle,
  });

  @override
  Widget build(BuildContext context) {
    List<TextSpan> spans = [];

    final RegExp linkRegExp = RegExp(
      r"\b(?:https?://|www\.)[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|]",
    );

    content.splitMapJoin(
      linkRegExp,
      onMatch: (match) {
        spans.add(
          TextSpan(
            text: match.group(0),
            style: linkStyle,
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                launchUrlString(match.group(0)!);
              },
          ),
        );
        return "";
      },
      onNonMatch: (text) {
        spans.add(TextSpan(text: text, style: normalStyle));
        return "";
      },
    );

    return RichText(text: TextSpan(children: spans));
  }
}