Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to put mouse cursor on hyper text in TextSpan in Flutter web

I am using something like this to have links in text inside a paragraph

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'This is a going to be a Text which has '),
      TextSpan(
        text: 'single tap',
        style: style,
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // single tapped
          },
      ),
    ],
  ),
)

Now, it works fine, but I cannot have a hand cursor when rolling over the text?

I was looking on how to do it and found this

MouseRegion(
  cursor: SystemMouseCursors.click,
  child: Container(
      height: 30,
      width: 30,
      color: Colors.red,
  ),
),

but is not possible to wrap one of the TextSpans in a Container and MouseRegion.

like image 401
user3808307 Avatar asked Oct 13 '20 01:10

user3808307


2 Answers

You can create a custom WidgetSpan like this:

class MouseRegionSpan extends WidgetSpan {
  MouseRegionSpan({
    @required MouseCursor mouseCursor,
    @required InlineSpan inlineSpan,
  }) : super(
          child: MouseRegion(
            cursor: mouseCursor,
            child: Text.rich(
              inlineSpan,
            ),
          ),
        );
}

and wrap your TextSpan with it:

MouseRegionSpan(
  mouseCursor: SystemMouseCursors.click,
  inlineSpan: TextSpan(
    text: 'single tap',
    style: style,
    recognizer: TapGestureRecognizer()
      ..onTap = () {
        // single tapped
      },
  ),
),
like image 63
Mahdi Arabpour Avatar answered Oct 10 '22 23:10

Mahdi Arabpour


Recently, this feature has been added to TextSpans.

As of Flutter 5647407 on master (probably going to be in the 2.1.0 release), the mouse cursor is clickable (hand cursor) by default. So you do not need to take any action other than upgrading Flutter.

Manually specifying

You can manually specify the mouseCursor property:

TextSpan(
  text: 'single tap',
  style: style,
  mouseCursor: MaterialStateMouseCursor.clickable,
  recognizer: TapGestureRecognizer()
    ..onTap = () {
      // single tapped
    },
),

Furthermore, there are now onEnter and onExit callbacks for responding to the mouse entering and leaving the text span.

Default SystemMouseCursors.click

If you take a look at the commit, you will notice that the default is now SystemMouseCursors.click when you specify a recognizer.

like image 5
creativecreatorormaybenot Avatar answered Oct 11 '22 00:10

creativecreatorormaybenot