Flutter-Web: url_launcher Link widget mouse hover - flutter

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

Answer 1

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',
),

Answer 2

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

Answer 3

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.

Answer 4

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