Repository navigation
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
Activity
[-]Most of Cupertino buttons in web don't change the cursor on hover to SystemMouserCursors.click[/-][+]Most of Cupertino buttons in web don't change the cursor on hover to SystemMouseCursors.click[/+][-]Most of Cupertino buttons in web don't change the cursor on hover to SystemMouseCursors.click[/-][+]Most of Cupertino buttons in web don't change the cursor on hover[/+]maheshj01 commentedon Jul 12, 2021
Hi @jkevingutierrez,
The issue is reproducible on the latest stable and the master channel. The
textButtonchanges the cursor on hover while this doesn't work forCupertinoButtonCode Sample
Output
Screen.Recording.2021-07-12.at.10.56.56.AM.mov
flutter doctor -v
Thank you.
Thaanu2001 commentedon Jul 12, 2021
@jkevingutierrez @maheshmnj I would like to work on this issue. Any procedure to start working?
1 remaining item
maheshj01 commentedon Aug 4, 2021
@Thaanu2001 Please go through this https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md
specifically tree hygiene and issue hygiene
[-]Most of Cupertino buttons in web don't change the cursor on hover[/-][+]Cupertino widgets don't change mouse cursor when hover[/+]TahaTesser commentedon Jan 19, 2022
Cupertino widgets, when hovered on Web, don't change the cursor. While it is expected behavior when running on native Desktop Apple Human Interface Guidelines - Mouse and Trackpad.
Any web clickable component should update the cursor to clickable when an object can receive a click. As the author pointed it is unexpected behavior.
Preview
When cursor remains unchanged in the browser
Screen.Recording.2022-01-19.at.16.02.59.mov
When cursor updates to clickable in the browser
Screen.Recording.2022-01-19.at.16.02.34.mov
Add clickable cursor for Cupertino Widgets on the web.
CupertinoButton: CupertinoButton: Add clickable cursor on web #96863CupertinoTabBar: CupertinoTabBar: Add clickable cursor on web #96996ContextMenu/ContextMenuAction:CupertinoContextMenu/ContextMenuAction: Add clickable cursor for web #99519CupertinoActionSheet/CupertinoAlertDialog:CupertinoActionSheet/CupertinoAlertDialog: Add clickable cursor for web #99548CupertinoSegmentedControl/CupertinoSlidingSegmentedControl:CupertinoSegmentedControl/CupertinoSlidingSegmentedControl: Add clickable cursor for web #99551CupertinoSwitch:CupertinoSwitch: Add clickable cursor for web #99554CupertinoSlider:CupertinoSlider: Add clickable cursor for web #995570xNF commentedon Feb 2, 2022
This is also a bit jarring when running on Windows Desktop. We can debate the appropriateness of using Apple widgets on a Microsoft platform, but clickable elements in the Windows world should change the cursor.
TahaTesser commentedon Feb 10, 2022
@0xNF
According to Apple human design guidelines, cursor isn't suppose change on desktop, if you're using Cupertino non-mac platform on desktop this would still apply. If you looking for such feature, consider Material or fluent_ui for Windows fidelity.
[-]Cupertino widgets don't change mouse cursor when hover[/-][+]Cupertino widgets don't change mouse cursor when hover on web[/+]TahaTesser commentedon Jun 22, 2022
Closing as fixed, all the PRs from #86174 (comment) are merged.
github-actions commentedon Jul 6, 2022
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.