Fix tappable area for `DropdownButtonFormField` & add `InkWell` to `DropdownButton` by TahaTesser · Pull Request #95906 · flutter/flutter

TahaTesser · 2021-12-28T15:17:08Z

This PR moves Input decoration for DropdownButtonFormField to DropdownButton, which is accessed by a private constructor for DropdownButtonFormField (this avoids this hack #53634 (comment), it can be really expensive to find layouts using this kinda hack to find inner gesture detector from DropdowButton) and adds InkWell to DropdownButton to match Material Design specs and most importantly fixes the tapping area fixes

The main reason for moving inputDecorator so inkWell size is equal to inputDecorator size
Adding InkWell to DropdownButton is required so DropdownButtonFormField has a bigger tappable area just like native Android.

Here is a native Android dropdown for reference

Flutter with this PR

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

werainkhatri

Just a few nits and queries.

packages/flutter/lib/src/material/dropdown.dart

packages/flutter/test/material/dropdown_form_field_test.dart

packages/flutter/test/material/dropdown_test.dart

packages/flutter/test/material/dropdown_form_field_test.dart

TahaTesser · 2022-01-14T11:03:57Z

cc; @gspencergoog
Can you please let me know If the private constructor approach is the way to go, I will update the PR for conflicts and fix semantics

packages/flutter/lib/src/material/dropdown.dart

packages/flutter/test/material/dropdown_form_field_test.dart

TahaTesser · 2022-01-18T16:05:19Z

@werainkhatri
I just pushed a couple of updates, can you please take a look?

packages/flutter/lib/src/material/dropdown.dart

packages/flutter/test/material/dropdown_form_field_test.dart

packages/flutter/lib/src/material/dropdown.dart

werainkhatri · 2022-01-19T10:39:43Z

Another issue I found:

DropdownButton used BoxDecoration to highlight when it had focus. Now that is handled by InkWell itself, so it should be removed, as the highlights overlap now.

https://github.com/flutter/flutter/blob/571a0708aaa00cc72332639459cb798e1965991b/packages/flutter/lib/src/material/dropdown.dart#L1474-L1479

packages/flutter/test/material/dropdown_test.dart

TahaTesser · 2022-01-27T15:33:31Z

@gspencergoog @werainkhatri
Is there anything else we need to do to land this please?

werainkhatri

This LGTM and sorry about the delay. Just a few minor nit fixes.

packages/flutter/lib/src/material/dropdown.dart

packages/flutter/test/material/dropdown_test.dart

gspencergoog

…l` to `DropdownButton` (flutter/flutter#95906)

iqfareez · 2022-03-02T00:57:10Z

Hi. When can we expect this pr make its way to stable?

…ropdownButton` (flutter#95906)

beamAkshay · 2022-07-08T14:14:04Z

When we use helperText property then its include helperText in tappable area as well.

`_hasPrimaryFocus` variable and its related code is no longer needed after using `InkWell` for `DropdownButton` at #95906

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Dec 28, 2021

TahaTesser requested a review from gspencergoog December 28, 2021 15:25

werainkhatri changed the title ~~Fix tappble area for DropdownFormField & add InkWell to DropdownButton~~ Fix tappable area for DropdownButtonFormField & add InkWell to DropdownButton Jan 1, 2022

werainkhatri requested changes Jan 1, 2022

View reviewed changes

nt4f04uNd reviewed Jan 3, 2022

View reviewed changes

packages/flutter/test/material/dropdown_form_field_test.dart Outdated Show resolved Hide resolved

gspencergoog requested changes Jan 14, 2022

View reviewed changes

packages/flutter/lib/src/material/dropdown.dart Outdated Show resolved Hide resolved

packages/flutter/test/material/dropdown_form_field_test.dart Outdated Show resolved Hide resolved

TahaTesser force-pushed the dropdown_tap_fix branch from 581a8ab to 0e72b7c Compare January 18, 2022 14:38

TahaTesser requested a review from werainkhatri January 18, 2022 16:06

werainkhatri reviewed Jan 18, 2022

View reviewed changes

packages/flutter/lib/src/material/dropdown.dart Outdated Show resolved Hide resolved

packages/flutter/lib/src/material/dropdown.dart Outdated Show resolved Hide resolved

packages/flutter/test/material/dropdown_form_field_test.dart Outdated Show resolved Hide resolved

werainkhatri requested changes Jan 18, 2022

View reviewed changes

packages/flutter/lib/src/material/dropdown.dart Outdated Show resolved Hide resolved

TahaTesser requested a review from gspencergoog January 19, 2022 09:23

TahaTesser force-pushed the dropdown_tap_fix branch from 0d64e89 to 821d6c4 Compare January 20, 2022 14:54

TahaTesser requested a review from werainkhatri January 20, 2022 16:13

gspencergoog reviewed Jan 21, 2022

View reviewed changes

packages/flutter/test/material/dropdown_test.dart Outdated Show resolved Hide resolved

TahaTesser requested a review from gspencergoog January 27, 2022 15:33

werainkhatri approved these changes Jan 27, 2022

View reviewed changes

gspencergoog approved these changes Jan 28, 2022

View reviewed changes

TahaTesser added 7 commits January 28, 2022 14:38

fixes

d594e5d

tests update

fb77510

add Material ancestor doc

b993dce

Remove decoration for focus and provide focusColor to InkWell

76c7135

resolve conflict

fc3ca6e

Remove focus handler (handle by InkWell)

c2b3ba8

Nits updates

2e1096c

TahaTesser force-pushed the dropdown_tap_fix branch from f55762f to 2e1096c Compare January 28, 2022 12:38

TahaTesser added the waiting for tree to go green label Jan 28, 2022

fluttergithubbot merged commit cc2c902 into flutter:master Jan 28, 2022

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 28, 2022

cc2c902 Fix tappable area for DropdownButtonFormField & add `InkWel…

19a1b00

…l` to `DropdownButton` (flutter/flutter#95906)

engine-flutter-autoroll mentioned this pull request Jan 28, 2022

Roll Flutter from 120d25f78689 to cc2c902bcbce (2 revisions) flutter/packages#584

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 28, 2022

cc2c902 Fix tappable area for DropdownButtonFormField & add `InkWel…

183e01d

…l` to `DropdownButton` (flutter/flutter#95906)

engine-flutter-autoroll mentioned this pull request Jan 28, 2022

Roll Flutter from 120d25f78689 to b8460d4d68af (3 revisions) flutter/packages#585

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 28, 2022

cc2c902 Fix tappable area for DropdownButtonFormField & add `InkWel…

5a2dee5

…l` to `DropdownButton` (flutter/flutter#95906)

engine-flutter-autoroll mentioned this pull request Jan 28, 2022

Roll Flutter from 120d25f78689 to 3348a55035ef (4 revisions) flutter/packages#586

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 28, 2022

cc2c902 Fix tappable area for DropdownButtonFormField & add `InkWel…

498f30c

…l` to `DropdownButton` (flutter/flutter#95906)

engine-flutter-autoroll mentioned this pull request Jan 28, 2022

Roll Flutter from 120d25f78689 to 1a429b65e7d3 (5 revisions) flutter/packages#587

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jan 28, 2022

cc2c902 Fix tappable area for DropdownButtonFormField & add `InkWel…

2070348

…l` to `DropdownButton` (flutter/flutter#95906)

engine-flutter-autoroll mentioned this pull request Jan 28, 2022

Roll Flutter from 120d25f78689 to ebfdeaec6ea9 (6 revisions) flutter/packages#588

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Feb 4, 2022

cc2c902 Fix tappable area for DropdownButtonFormField & add `InkWel…

bcb8440

…l` to `DropdownButton` (flutter/flutter#95906)

TahaTesser deleted the dropdown_tap_fix branch February 4, 2022 07:52

clocksmith pushed a commit to clocksmith/flutter that referenced this pull request Mar 8, 2022

Fix tappable area for DropdownButtonFormField & add InkWell to `D…

73ba080

…ropdownButton` (flutter#95906)

AhmedLSayed9 mentioned this pull request Jun 17, 2023

Remove unnecessary variable _hasPrimaryFocus #129066

Merged

8 tasks

auto-submit bot pushed a commit that referenced this pull request Jun 22, 2023

Remove unnecessary variable _hasPrimaryFocus (#129066)

042c036

`_hasPrimaryFocus` variable and its related code is no longer needed after using `InkWell` for `DropdownButton` at #95906

bleroux mentioned this pull request Nov 26, 2024

Fix DropdownButtonFormField overlay colors management #159472

Merged

Conversation

TahaTesser commented Dec 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

werainkhatri left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Jan 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TahaTesser commented Jan 18, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

werainkhatri commented Jan 19, 2022

Uh oh!

Uh oh!

TahaTesser commented Jan 27, 2022

Uh oh!

werainkhatri left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gspencergoog left a comment

Choose a reason for hiding this comment

Uh oh!

iqfareez commented Mar 2, 2022

Uh oh!

beamAkshay commented Jul 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

TahaTesser commented Dec 28, 2021 •

edited

Loading

TahaTesser commented Jan 14, 2022 •

edited

Loading