Solución:
Tuve dificultades para encontrar documentación sobre el soporte ahora integrado. Esto es lo que me ayudó: https://github.com/flutter/flutter/issues/58260
Y esto funcionó para mí, sin cambiar index.html, etc.
MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: Icon(
Icons.add_comment,
size: 20,
),
onTap: () {},
),
),
Consulte también la documentación oficial: https://api.flutter.dev/flutter/rendering/MouseCursor-class.html
Widget build(BuildContext context) {
return Center(
child: MouseRegion(
cursor: SystemMouseCursors.text,
child: Container(
width: 200,
height: 100,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.yellow),
),
),
),
);
}
Y aquí https://api.flutter.dev/flutter/material/MaterialStateMouseCursor-class.html otro ejemplo maravilloso de los documentos oficiales que “… define un cursor de mouse que se resuelve en SystemMouseCursors.forbidden cuando su widget está deshabilitado. “
Empezando con dev versión de compilación del canal 1.19.0–3.0.pre hay soporte incorporado para el cursor del puntero. Se usa el mismo método que a continuación con la diferencia que se aplica al elemento contenedor de la aplicación Flutter flt-glass-pane. Usar el método de abajo simplemente duplicará el comportamiento.
Para anular el pointer cursor, puede utilizar el método de abajo pero aplicado en el flt-glass-pane elemento.
Una solución alternativa para esto es la siguiente:
- Tienes que establecer un identificación (por ejemplo contenedor de aplicaciones en todo cuerpo de la aplicación index.html plantilla).
Así es como tu index.html se vera como:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My awesome app</title>
</head>
<body id="app-container">
<script src="https://foroayuda.es/main.dart.js" type="application/javascript"></script>
</body>
</html>
- A continuación, debe crear una clase de dardos de envoltura. lo llamé hand_cursor.dart:
import 'package:flutter_web/gestures.dart';
import 'package:flutter_web/widgets.dart';
import 'package:universal_html/html.dart' as html;
// see https://pub.dev/packages/universal_html
class HandCursor extends MouseRegion {
// get a reference to the body element that we previously altered
static final appContainer = html.window.document.getElementById('app-container');
HandCursor({Widget child}) : super(
onHover: (PointerHoverEvent evt) {
appContainer.style.cursor="pointer";
// you can use any of these:
// 'help', 'wait', 'move', 'crosshair', 'text' or 'pointer'
// more options/details here: http://www.javascripter.net/faq/stylesc.htm
},
onExit: (PointerExitEvent evt) {
// set cursor's style 'default' to return it to the original state
appContainer.style.cursor="default";
},
child: child
);
}
- Después de eso, donde quiera que se muestre el cursor de mano, debe envolver su elemento en este contenedor de HandCursor. Ver la clase awesome_button.dart bramido:
import 'package:awesome_app/widgets/containers/hand_cursor.dart';
import 'package:flutter_web/material.dart';
import 'package:flutter_web/widgets.dart';
class AwesomeButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
HandCursor(
child: IconButton(
onPressed: () {
// do some magic
},
icon: Icon(Icons.star)
),
)
],
);
}
}
Puede encontrar una breve explicación aquí.
Una actualización más versátil, que funciona en los nuevos proyectos web creados con el Maestro canal de Flutter, se puede encontrar aquí.
Espero que ayude.
El método anterior está obsoleto. Aquí está el código actualizado
import 'package:flutter/gestures.dart';
import 'package:flutter/widgets.dart';
import 'package:universal_html/prefer_sdk/html.dart' as html;
class HandCursor extends MouseRegion {
static final appContainer = html.window.document.getElementById('app-container');
HandCursor({Widget child})
: super(
onHover: (PointerHoverEvent evt) {
appContainer.style.cursor="pointer";
},
onExit: (PointerExitEvent evt) {
appContainer.style.cursor="default";
},
child: child,
);
}
Y en su archivo pubspec.yaml, agregue universal_html como paquete como dependencia. La versión puede cambiar.
dependencies:
flutter:
sdk: flutter
universal_html: ^1.1.4
Aún desea tener una identificación de contenedor de aplicaciones adjunta al cuerpo de su html. Aquí está mi archivo html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Your App Title</title>
</head>
<body id="app-container">
<script src="https://foroayuda.es/main.dart.js" type="application/javascript"></script>
</body>
</html>
Quiere poner el código del widget HandCursor en su propio archivo. Puedes llamarlo hand_cursor.dart. Y para usarlo en el widget en el que desea que aparezca la mano, impórtelo al archivo en el que está trabajando y envuelva el widget que desea en el widget HandCursor.