Open TahaTesser opened 1 year ago
cc: @rydmike Did you notice this issue? Am I correct to expect the selected overlay color here? I can see there is a selected state but color isn't picked up.
Hover, Focus, & Press work just for fine but internal inkwell uses MaterialStateController for passing selected state which doesn't work to overlay color.
I noticed this issue while writing a bunch of overlay tests for https://github.com/flutter/flutter/issues/130051
Thanks for the report, @TahaTesser
I can see the issue if the check condition compares to MaterialState.selected
, noticed below output log and black
overlay color.
flutter: dayOverlayColor.states: {MaterialState.selected, MaterialState.hovered}
flutter: dayOverlayColor.states: {MaterialState.hovered}
But it seems to work if I change the check condition compares to MaterialState.hovered
. The same states are logged but can see the expected result (green overlay color when hovering and pressing). I am not sure about the output state here. Looks like this is a MaterialState issue? Or is using MaterialState.hovered
applicable for this case?
Other states work because Inkwell
automatically handles but the selected state is provided via MaterialStateController
.
Looks like this is a MaterialState issue?
It seems to be related to MaterialStateController
. I can produce with just InkWell
with MaterialStateController
for the selected
state.
I think other widgets which also use MaterialStateController
to provide a selected
state might reproduce this issue.
futter: states: {MaterialState.selected, MaterialState.hovered}
flutter: states: {MaterialState.hovered}
Since InkWell
fires MaterialState.selected, MaterialState.hovered
then only MaterialState.hovered
before the color is drawn so the selected state is never picked up for the color to be drawn.
Thanks for the update.
Regarding hovered
state with mouse interaction, I see this in M3 specs:
Hover states can be combined with focused, activated, selected, or pressed states.
Also with focused
state when using Tab key to focus on widget:
Focus states can be represented in combination with hover, activated, or selected states.
flutter: states: {MaterialState.selected, MaterialState.focused}
flutter: states: {MaterialState.focused}
But I don't see any M3 specs mention to state order. It's quite more detailed on M2 specs, though. In Flutter, it seems the overlay color is only drawn by the latest state (hovered
), ignoring intermediate states (selected
). This corresponds to the original issue. Let's check below sample code with timeDilation = 20.0
:
final MaterialStateProperty<Color> overlayColor = MaterialStateProperty.resolveWith((Set<MaterialState> states) {
print('states: $states');
if (states.contains(MaterialState.selected)) {
return Colors.green;
}
if (states.contains(MaterialState.hovered)) {
return Colors.red;
}
return Colors.transparent;
});
Reproduced this issue on latest stable and master channels.
This is reproducible in buttons as well.
It looks like the last state reported isn't selected
flutter: selected
flutter: no state
cc: @bleroux If you've any insight or fix for this.
Similarly IconButton
has an internal MaterialStatesController
and it also doesn't return the color in the selected state.
final MaterialStateProperty<Color?> overlayColor =
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
print('selected');
return Colors.blue;
}
print('no state');
return Colors.transparent;
});
IconButton(
style: ButtonStyle(
overlayColor: overlayColor,
),
onPressed: () {},
isSelected: true,
icon: const Icon(Icons.abc),
),
This issue is assigned to @HansMuller but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!
dayBackgroundColor: MaterialStateColor.resolveWith(
(Set<MaterialState> states) {
Color? color;
if (states.contains(MaterialState.selected)) {
color = Colors.green;
}
return color ?? Colors.transparent;
},
),
I'm encountering a similar issue with the dayOverlayColor
when hovering a day cell, the new color for dayBackgroundColor
is never resolved properly and the overlay is not displayed.
import 'package:flutter/material.dart';
class MyPage extends StatelessWidget {
const MyPage({super.key});
@override
Widget build(BuildContext context) {
final now = DateTime.now();
final firstDate = now.subtract(const Duration(days: 365));
final lastDate = now.add(const Duration(days: 365));
return Scaffold(
body: DatePickerTheme(
data: DatePickerThemeData(
dayBackgroundColor: WidgetStateProperty.resolveWith((states) {
// Never called for WidgetState.hovered
print('Updated states: $states');
final isHovered = states.contains(WidgetState.hovered);
return isHovered ? null : Colors.blue;
}),
dayOverlayColor: WidgetStateProperty.resolveWith((_) => Colors.red),
),
child: DatePickerDialog(firstDate: firstDate, lastDate: lastDate),
),
);
}
}
Is there an existing issue for this?
Steps to reproduce
Apply selected overlay color in
DatePickerTheme.dayOverlayColor
andDatePickerTheme.yearOverlayColor
Expected results
Actual results
Code sample
Code sample
```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( datePickerTheme: DatePickerThemeData( yearOverlayColor: MaterialStateProperty.resolveWith((SetScreenshots or Video
Screenshots / Video demonstration
[Upload media here]Logs
Logs
```console [Paste your logs here] ```Flutter Doctor output
Doctor output
```console [!] Flutter (Channel [user-branch], 3.13.0-3.0.pre.64, on macOS 13.4.1 22F82 darwin-arm64, locale en-EE) ! Flutter version 3.13.0-3.0.pre.64 on channel [user-branch] at /Users/tahatesser/Code/flutter Currently on an unknown channel. Run `flutter channel` to switch to an official channel. If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install. ! Upstream repository git@github.com:TahaTesser/flutter.git is not the same as FLUTTER_GIT_URL • FLUTTER_GIT_URL = git@github.com:NevercodeHQ/flutter.git • Framework revision 418d6a56f9 (5 hours ago), 2023-07-14 13:59:16 +0300 • Engine revision 3a1b12a2fa • Dart version 3.1.0 (build 3.1.0-310.0.dev) • DevTools version 2.25.0 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/tahatesser/Code/android-sdk • Platform android-34, build-tools 34.0.0 • ANDROID_SDK_ROOT = /Users/tahatesser/Code/android-sdk • Java binary at: /Applications/Android Studio Preview.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b829.16-10353782) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode-14.3.1.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [!] Android Studio (version unknown) • Android Studio at /Applications/Android Studio Preview.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart ✗ Unable to determine Android Studio version. • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b829.16-10353782) [✓] VS Code (version 1.80.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.68.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.4.1 22F82 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.198 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 2 categories. ```