CODEWITHSUNDEEP
htmlfluttermouse-cursor
Najo
Najo

Reputation: 121

Flutter: Selectable Text with clickable parts?

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"},
          ),
        ),

      ],
    );
  }
}

Upvotes: 5

Views: 3935

Answers (2)

Furlan
Furlan

Reputation: 609

Use DefaultSelectionStyle to define the default selection properties for all widgets below it in the widget tree. This widget allows you to customize aspects such as the mouse cursor when interacting with the child widgets.

DefaultSelectionStyle(
  mouseCursor: SystemMouseCursors.click,
  child: Text('Text on button'),
);

In this example, DefaultSelectionStyle sets the mouse cursor to a click cursor for the text widget. This means that when a user hovers over the text, the cursor will change to indicate that the text is clickable.

Upvotes: 0

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63569

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';
                  },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 9

Related Questions