Flutter-Web: url_launcher Link widget mouse hover

Question

I'm using the flutter url_launcher https://pub.dev/packages/url_launcher package to open urls when i click some button.

With the new Link widget im now able to open a web page on the same tab but i cant add mouse pointer when user is hovering the button

import 'package:bianca/UI/botao_azul.dart';
import 'package:url_launcher/link.dart';
import 'package:flutter/material.dart';
String link = "https://www.google.com";
class MesmaAba extends StatelessWidget {
  final double tamanho;
  final String conteudo;
  MesmaAba({this.tamanho, this.conteudo});
  @override
  Widget build(BuildContext context) {
    return Link(
      uri: Uri.parse(link),
      builder: (BuildContext context, FollowLink followLink) => BotaoAzul(
          conteudo: conteudo,
          tamanho: tamanho,
          funcao: followLink 
          ),
    );
  }
}

BotaoAzul class:

import 'package:flutter/material.dart';

class BotaoAzul extends StatelessWidget {
  final String conteudo;
  final double tamanho;
  final Function funcao;

  BotaoAzul({this.conteudo, this.tamanho,this.funcao});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FlatButton(
            onPressed: funcao,
            child: Text(conteudo,
                style: TextStyle(
                    fontSize: tamanho,
                    color: Colors.white,
                    fontWeight: FontWeight.bold))),
      ),
      decoration: BoxDecoration(
          color: Colors.blue[900], borderRadius: BorderRadius.circular(20.0)),
    );
  }
}

I can already open urls with botaoAzul button on another tab using this function (and without the Link widget, the mouse changes on hovering the button)

import 'package:url_launcher/url_launcher.dart';
void launchLink(String link) async {
  await launch(
    link,
  );
}

But i need to open the url on the same tab.

I've already tried all implementations of this other question without success: https://stackoverflow.com/questions/56211844/flutter-web-mouse-hover-change-cursor-to-pointer

score 1 · Answer 1 · answered Nov 08 '20 at 10:40

As I know latest version of flutter web supports hand cursor for InkWell widget automatically. Below simple class:

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

/// Provides an anchor link to web URL.
class HoveredWebAnchor extends StatefulWidget {
  HoveredWebAnchor(
      {Key key,
      @required this.label,
      @required this.url,
      this.underlined = true})
      : assert(label != null),
        assert(url != null),
        assert(underlined != null),
        super(key: key);

  /// The label of anchor
  final String label;

  /// The web URL to open when anchor clicked
  final String url;

  /// Identifies if anchor label will be underlined.
  final bool underlined;

  @override
  _HoveredWebAnchorState createState() => _HoveredWebAnchorState();
}

class _HoveredWebAnchorState extends State<HoveredWebAnchor> {
  /// Current text style
  TextStyle _textStyle;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      hoverColor: Colors.transparent,
      child: Text(
        widget.label,
        style: _textStyle,
      ),
      onHover: (hovered) {
        setState(() {
          if (hovered) {
            _textStyle = TextStyle(color: Theme.of(context).accentColor);
            if (widget.underlined) {
              _textStyle = _textStyle.copyWith(
                decoration: TextDecoration.underline,
              );
            }
          } else {
            _textStyle = null;
          }
        });
      },
      onTap: () {
        launch(widget.url, forceWebView: true);
      },
    );
  }
}

Using:

HoveredWebAnchor(
  label: 'Open Google',
  url: 'http://www.google.com',
),

your code opens the link into another tab, i'm looking for something in the same tab. — Gianluca Bettega, Nov 08 '20 at 11:29

score 0 · Answer 2 · answered Jul 09 '21 at 11:52

I have improved suggestion of @BambinoUA to sound null safety and some minor changes so I decided to share it with y'all

class HoveredWebAnchor extends StatefulWidget {
  const HoveredWebAnchor(
    this.label, {
    Key? key,
    required this.style,
    this.maxLines,
    required this.onTap,
  }) : super(key: key);

  final String label;
  final TextStyle? style;
  final int? maxLines;
  final VoidCallback onTap;

  @override
  _HoveredWebAnchorState createState() => _HoveredWebAnchorState();
}

class _HoveredWebAnchorState extends State<HoveredWebAnchor> {
  TextStyle? _textStyle;

  @override
  void initState() {
    _textStyle = widget.style;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      hoverColor: Colors.transparent,
      onHover: (hovered) {
        setState(() {
          if (hovered) {
            _textStyle = _textStyle?.copyWith(
              decoration: TextDecoration.underline,
            );
          } else {
            _textStyle = _textStyle?.copyWith(
              decoration: widget.style?.decoration,
            );
          }
        });
      },
      onTap: widget.onTap,
      child: Text(
        widget.label,
        style: _textStyle,
        maxLines: widget.maxLines,
      ),
    );
  }
}

score 0 · Answer 3 · answered Jul 29 '21 at 22:50

The way to change your mouse cursor whilst keeping the behavior of the Link Widget the same would be to wrap the Link Widget in a MouseRegion

MouseRegion(
  cursor: SystemMouseCursors.click,
  child: Link(
    uri: Uri.parse(link),
    builder: (BuildContext context, FollowLink followLink) => 
        BotaoAzul(
          conteudo: conteudo,
          tamanho: tamanho,
          funcao: followLink 
        ),
  ),
)

From the Link widget revision 2 document:

The Link widget doesn’t provide any mouse cursor, and fully relies on the user to do their own mouse cursor. In many cases, users will be using a button, which already shows the correct mouse cursor. In other cases, the user can wrap the Link (or the child of the Link) in a mouse region and give it a cursor.

score -1 · Answer 4 · answered Nov 08 '20 at 11:43

found something last night that solves the problem:

Instead of using url_launcher Link, i'm now importing the html package

import 'dart:html' as html;
String link = "https://www.google.com";
.....

void openPage(){
html.window.location.assign(link);
}

...... (widget build method)

BotaoAzul(
  conteudo: "Hey",
  tamanho: 30,
   funcao: openPage
),

It now opens the link on the same tab and i can return to my flutter app from the chrome back button

Flutter-Web: url_launcher Link widget mouse hover

4 Answers4