-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Steps to reproduce
Set ExpansionPanel.canTapOnHeader = true, then hover over the ExpansionPanel header on web, the mouse cursor will change from the "hand" to the usual mouse arrow shape while hovering over the expand/collapse icon.
I did a fix for another issue in 147098, that would have fixed this, but @TahaTesser removed the IgnorePointer and fixed that issue in another way, however that has resulted in this bug. Disabling the Expand/collapse IconButton when canTapOnHeader is true, and trying to put a band-aid on it like changing the disabled color was never going to be a good solution due to all the undesirable side effects that entails, and it has been the cause of multiple user experience bugs. IgnorePointer will need to be used in the end anyway.
What do we think IgnorePointer was made for? Here is the example in the docs:
The following sample has an IgnorePointer widget wrapping the Column which contains a button. When ignoring is set to true anything inside the Column can not be tapped. When ignoring is set to false anything inside the Column can be tapped.
Expected results
The mouse cursor is always the hand on the whole ExpansionPanel header.
Actual results
The mouse cursor changes from the "hand" to the usual mouse arrow shape while hovering over the expand/collapse icon.
Code sample
Code sample
import 'package:flutter/material.dart';
/// Flutter code sample for [ExpansionPanelList].
void main() => runApp(const ExpansionPanelListExampleApp());
class ExpansionPanelListExampleApp extends StatelessWidget {
const ExpansionPanelListExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('ExpansionPanelList Sample')),
body: const ExpansionPanelListExample(),
),
);
}
}
// stores ExpansionPanel state information
class Item {
Item({
required this.expandedValue,
required this.headerValue,
required this.value,
required this.canTapOnHeader,
});
String expandedValue;
String headerValue;
int value;
bool canTapOnHeader;
}
List<Item> generateItems(int numberOfItems) {
return List<Item>.generate(numberOfItems, (int index) {
bool canTapOnHeader = index > 3;
return Item(
headerValue: 'Panel $index canTapOnHeader=${canTapOnHeader.toString()}',
expandedValue: 'This is item number $index',
value: index,
canTapOnHeader: canTapOnHeader,
);
});
}
class ExpansionPanelListExample extends StatefulWidget {
const ExpansionPanelListExample({super.key});
@override
State<ExpansionPanelListExample> createState() =>
_ExpansionPanelListExampleState();
}
class _ExpansionPanelListExampleState extends State<ExpansionPanelListExample> {
final List<Item> _data = generateItems(8);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList.radio(
children: _data.map<ExpansionPanelRadio>((Item item) {
return ExpansionPanelRadio(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
),
value: item.value,
canTapOnHeader: item.canTapOnHeader,
);
}).toList(),
expandIconColor: Colors.red,
);
}
}Screenshots or Video
No response
Logs
No response
Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.24.0, on macOS 14.6.1 23G93 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] IntelliJ IDEA Community Edition (version 2024.2.1)
[✓] VS Code (version 1.93.0)
[✓] Connected device (4 available)
[✓] Network resources
• No issues found!