Flutter: Clickable Selectable Text, control over cursor

Question

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 browser to phone with.

My issue is that when hovering over this text, the cursor is that of "text" from the selectable text, but I want the cursor to change to a "pointer"/"link select". In other words, I want it to work how "real" HTML does by default.

class Example extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
            SelectableText(
              'Phone us:',
              style: TextStyle(fontSize: 24),
            ),
        SelectableText(
            'Tel: +123 1231 231',
            style: TextStyle(fontSize: 20),
            onTap: ()=>{html.window.location.href = "tel:+1231231231"},
          ),
      ],
    );
  }
}

I tried wrapping the selectable text in a MouseRegion(), but this didn't work either.

class Example extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
            SelectableText(
              'Phone us:',
              style: TextStyle(fontSize: 24),
            ),

        MouseRegion(
          cursor: SystemMouseCursors.click,
          child: SelectableText(
            'Tel: +123 1231 231',
            style: TextStyle(fontSize: 20),
            onTap: ()=>{html.window.location.href = "tel:+1231231231"},
          ),
        ),

      ],
    );
  }
}

Answer 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';

class ClickAbleText extends StatelessWidget {
  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';
                  },
              ),
            ],
          ),
        ),
      ),
    );
  }
}