Cupertino widgets don't change mouse cursor when hover on web #86174
Description
Steps to Reproduce
- Run
flutter create bug. - Add a CupertinoButton to the app. eg:
main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Bug'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoButton(
onPressed: () {
print('Cupertino');
},
child: const Text('Click me'),
),
],
),
),
),
);
}
}
- Run the app in the browser using Flutter web (
flutter run -d chrome) - Hover the CupertinoButton
- It won't change the cursor to indicate that it is a clickable element (SystemMouseCursors.click)
- You can also add a Material button, like a TextButton to compare the behavior:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Bug'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoButton(
onPressed: () {
print('Cupertino');
},
child: const Text('Click me'),
),
TextButton(
onPressed: () {
print('Material');
},
child: const Text('Click me'),
),
],
),
),
),
);
}
}
The problem can also be seen in https://flutter-widget.live/
For example
https://flutter-widget.live/widgets/CupertinoButton vs https://flutter-widget.live/widgets/RaisedButton
https://flutter-widget.live/widgets/CupertinoAlertDialog vs https://flutter-widget.live/widgets/AlertDialog
https://flutter-widget.live/widgets/CupertinoNavigationBar vs https://flutter-widget.live/widgets/AppBar
Visiting the site using a desktop browser and hovering the Cupertino clickable widgets, like the CupertinoButton will show the issue.
Cupertino clickable widgets (buttons) don't change the cursor to SystemMouseCursors.click, while material buttons change the cursor correctly.
Expected results:
In Flutter web, hovering Cupertino widgets that are clickable, like CuperttinoButton, CupertinoDialogAction, CupertinoNavigationBarBackButton, CupertinoActionSheetAction, etc, should show the cursor as clickable (SystemMouseCursors.click)
Actual results:
In the Flutter web, hovering Cupertino widgets that are clickable, like CuperttinoButton, CupertinoDialogAction, CupertinoNavigationBarBackButton, CupertinoActionSheetAction, etc, is showing the cursor as basic(SystemMouseCursors.basic)
Note: similar behavior is happening when the CupertinoButton is disabled (onPressed: null), it won't change the cursor to SystemMouseCursors.forbidden when the button is hovered. eg:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Bug'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoButton(
onPressed: null,
child: const Text('Click me'),
),
TextButton(
onPressed: null,
child: const Text('Click me'),
),
],
),
),
),
);
}
}
Metadata
Metadata
Assignees
Labels
Type
Projects
Status