Flutter: Clickable Selectable Text, Control Over Cursor

I want a selectable text that is clickable, in this case I'm using Flutter Web and the html library, I have a clickable phone number which allows the user to select an app from the

Solution 1:

try SelectableText.rich with url_launcher .

Example Code

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

classClickAbleTextextendsStatelessWidget {
  const ClickAbleText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SelectableText.rich(
          TextSpan(
            text: 'Phone us:',
            style: TextStyle(
              fontSize: 24,
            ),
            children: [
              TextSpan(
                text: '+123 1231 231',
                style: TextStyle(fontSize: 20),
                mouseCursor: SystemMouseCursors.click,
                recognizer: TapGestureRecognizer()
                  ..onTap = () async {
                    final_url="tel:+1 555 010 999";
                    await canLaunch(_url)
                        ? await launch(_url)
                        : throw'Could not launch $_url';
                  },
              ),
            ],
          ),
        ),
      ),
    );
  }
}