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

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

• Gianluca Bettega: your code opens the link into another tab, i'm looking for something in the same tab.

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