Fix DropdownButtonFormField overlay colors management #159472
Conversation
0f29816 to
5f9fdfa
Compare
|
@justinmc This PR introduced a change of behavior: previously overlay colors were always shown because an InkWell was used. With this PR, the overlay colors are shown only when InputDecoration.filled is true.
|
There was a problem hiding this comment.
The change LGTM but as you mentioned we should talk about the Google failures:
They are all visual diff golden tests, and there aren't too many. I see two types of failures:
- In a few cases, the background color of the field has gone from white or black to grey.
- In most cases, a few pixels around the corners of the overlay have changed. It doesn't visually look any different to my eye. Do you have idea why that would happen though?
Are both of these expected?
| @@ -1586,30 +1592,75 @@ class _DropdownButtonState<T> extends State<DropdownButton<T>> with WidgetsBindi | |||
| }, | |||
| ); | |||
|
|
|||
| // When an InputDecoration is provided, use it instead of using an InkWell | |||
There was a problem hiding this comment.
You're not losing an ink splash effect by doing this?
There was a problem hiding this comment.
Yes we do. Splash effect on DropdownButton is not part of the spec and it was not there until #95906 added the InkWell.
If we want to keep the InkWell, I think the only solution to fix the issues listed in this PR description will be to add an option inside InputDecorator to add an optional InkWell (would be a non-breaking change but adds more complexity to InputDecorator for a specific use case). Otherwise it is almost impossible to properly positioned and sized the InkWell has the InputDecorator container adjust based on several parameters (border style, content padding, ect).
There was a problem hiding this comment.
I'm on board with removing the InkWell, thanks for explaining. I double checked the spec and you're right that it's not in there.
Possibly because something is used from the InputDecorationTheme now. Having DropdownButton respecting the InputDecorationTheme is probably the right behavior but I understand it might be too much of a breaking change.
There were some clipping logic added in #95906 around the InkWell that might explain the change. |
5f9fdfa to
a5ad793
Compare
|
@justinmc I updated the PR today (replacing MouseRegion.onHover with onEnter as you proposed, and also changing the default color for a filled and focused DropdownButton based on your description of the golden failure). For the other golden diff you mentionned ("In most cases, a few pixels around the corners of the overlay have changed. It doesn't visually look any different to my eye.") I think it could also be because, previously the InkWell was overflowing the borders for a focused filled DropdownButton, see #147069 (in the issue the code sample increases the border radius for illustration, but with the default border radius it would be some widgets on each corner). |
| @@ -1586,30 +1592,75 @@ class _DropdownButtonState<T> extends State<DropdownButton<T>> with WidgetsBindi | |||
| }, | |||
| ); | |||
|
|
|||
| // When an InputDecoration is provided, use it instead of using an InkWell | |||
There was a problem hiding this comment.
I'm on board with removing the InkWell, thanks for explaining. I double checked the spec and you're right that it's not in there.
The `builder` was needed to access `Focus.of(context)` but it's no longer needed after #159472 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing.
The `builder` was needed to access `Focus.of(context)` but it's no longer needed after flutter#159472 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing.
Description
This PR fixes some
DropdownButtonFormFieldissues where the overlay color overflows.Before this PR,
DropdownButtonFormFieldwas relying on anInkWellto display overlay colors. This resulted in several issues related to theInkWelloverflowing because it is not aware of the inner container insideInputDecorator, for instance see #106659.With this PR,
DropdownButtonFormFielddoes not use anInkWellbut rely onInputDecoratorto paint overlay colors.InputDecoratorpaints overlay colors only on its internal container, this fixes the color overflowing when usingInkWell. With this change users can opt-in for overlay colors to be painted by setting InputDecorator.filled to true (similarly to TextField and accordingly to the Material specification).Code sample from #106659 with InputDecoration.filled set to true:
Code sample with InputDecoration.filled set to true
Before:
After:
After (when filled is not set to true):
Related Issue
Fixes DropdownButtonFormField InkWell spreads to error message.
Fixes DropdownButtonFormField input decorator focus/hover is not clipped and appears behind fill color.
First step for DropDownButtonFormField hoverColor has no effect in web and desktop platforms
Tests
Adds 4 tests.
Updates 2 tests (remove checks specific to InkWell usage and use filled: true when checking for hover/focus colors).
Removes 1 test (test specific to InkWell usage, because this PR removes the InkWell the test is obsolete).