Skip to content

CupertinoSegmentedControl does not always respond to selections! #57326

Closed
#57461
Closed
CupertinoSegmentedControl does not always respond to selections!#57326
#57461
Assignees
LongCatIsLooong
Labels
a: fidelityMatching the OEM platforms bettera: qualityA truly polished experiencea: tabletTablets and landscape phonesfound in release: 1.17Found to occur in 1.17frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packages

Description

@rydmike
rydmike
opened on May 15, 2020

CupertinoSegmentedControl issue

Consider this simple CodePen with a CupertinoSegmentedControl:

https://codepen.io/rydmike/pen/GRpXyBQ

As you can see you cannot select option 2 and 5.
Oddly enough if you change the "theFontSize" in the Codepen to 12, you cannot select options 4 or 5.

If you resize the Codepen output so it starts to compress the control's selections a bit, it will start to work correctly!

Steps to Reproduce

  1. Try it in the CodePen to see it: https://codepen.io/rydmike/pen/GRpXyBQ,

or

  1. Copy paste the code from the Codepen
  2. Build for Android with Windows, to an emulator or device
  3. If the device is wide enough that the segmented control does not get compressed a bit, you will see the same issue on the device as in the Codepen. If the control is a bit compressed horizontally, like it will be on most phone sized devices, it will work correctly. However, if you rotate such a device to landscape mode, it will stop working!

Used version

I tested the above on the live version of Codepen and Dartpad, and also by building to Android emulators PixelC tablet and Pixel3XL phone using API28. I also tested with a real Nexus7 tablet device and an Android OnePlus7 phone.

All tests show the same issue.

I have not tested on iOS devices/simulators by building with a Mac.

Below is the used build setup:

√] Flutter (Channel stable, v1.17.1, on Microsoft Windows [Version 10.0.18363.778], locale en-US)
    • Flutter version 1.17.1 at c:\src\flutter
    • Framework revision f7a6a7906b (3 days ago), 2020-05-12 18:39:00 -0700
    • Engine revision 6bc433c6b6
    • Dart version 2.8.2

 
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\mryds\AppData\Local\Android\sdk
    • Platform android-28, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
    • All Android licenses accepted.

[√] Android Studio (version 3.6)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)

[√] IntelliJ IDEA Community Edition (version 2019.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.3.1
    • Flutter plugin version 35.3.3
    • Dart plugin version 192.7402

[√] VS Code (version 1.45.1)
    • VS Code at C:\Users\mryds\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.10.1

[√] Connected device (2 available)
    • Nexus 7                      • 0a99f5e8      • android-arm • Android 6.0.1 (API 23)
    • Android SDK built for x86 64 • emulator-5554 • android-x64 • Android 9 (API 28) (emulator)

• No issues found!

Activity

  1. timsneath commented on May 15, 2020

    @timsneath
    timsneath
    on May 15, 2020

    @HansMuller might want to have someone take a look at this. Thanks for reporting, @rydmike.

  2. timsneath
    added
    a: fidelityMatching the OEM platforms better
    a: qualityA truly polished experience
    a: tabletTablets and landscape phones
    p: cupertino_uicupertino_ui package in flutter/packages
    found in release: 1.17Found to occur in 1.17
    frameworkflutter/packages/flutter repository. See also f: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    on May 15, 2020

  3. jg-l commented on May 15, 2020

    @jg-l
    jg-l
    on May 15, 2020

    I'm on Mac and I can select 1-3 but not 4 and 5.

  4. HansMuller commented on May 15, 2020

    @HansMuller
    HansMuller
    on May 15, 2020
    Contributor

    @HansMuller has asked someone to take a look at this

  5. LongCatIsLooong
    self-assigned this
    on May 15, 2020

  6. rydmike commented on May 15, 2020

    @rydmike
    rydmike
    on May 15, 2020
    ContributorAuthor

    I can observe the issue on all channels from current stable to master and on platforms Android, Windows and Web.

    Here was an attempt to look into a cause:
    https://twitter.com/OrestesGaolin/status/1261375757072297984

    I thought there might be something to it, when I saw it too, but as far as I could find, I only managed to re-bunk this theory when looking closer (see replies to above Tweet).

  7. pakivika commented on May 16, 2020

    @pakivika
    pakivika
    on May 16, 2020

    The behavior is same with iOS simulator built with mac. Works on portrait but fails on landscape. Tested with Flutter 1.17.0 channel beta and Flutter 1.18.0-11.1.pre channel beta.

  8. bleroux commented on May 16, 2020

    @bleroux
    bleroux
    on May 16, 2020
    Contributor

    After investigating this problem for several hours ;-), I found that this issue is related to the way hit testing is done in _RenderSegmentedControl.
    Here is a codepen with a workaround (see SelectDevice.build method) and some comments to explain why this workaround works :
    https://codepen.io/brunoleroux/pen/RwWeQJY

  9. rydmike commented on May 17, 2020

    @rydmike
    rydmike
    on May 17, 2020
    ContributorAuthor

    Thanks @bleroux Bruno for the quick reply and for figuring out the cause and for a simple, functional workaround.

    Several hours! Ouch! 😅 Yeah I did the same. When I found this issue, I had a hard time believing it was an issue and thought I must be doing something wrong and looked at it from several angles.

    After my last comment above, I looked at the hit testing too and suspected it had something to do with the rather involved hit testing on the children. I also wondered why it is designed the way it is, but that is another discussion.

    When I read your explanation of the cause in the Codepen comments, I also had to try some alternative workarounds:

    1. Add some width to the SizeBox, so it no longer is one dimensional -> Did not work
    2. Add the SizedBox space via bottom padding to the Icon or top padding to the Text -> Did not work either.
    3. Just remove the SizedBox -> This works, but it of course no longer looks the same.

    I was just curious and wanted to see what the impact of those approaches might be. Naturally wrapping the SegmentControl content in an AbsorbPointer, like you suggest, is the easiest and safest approach to enable the intended design to work with the content provided, without having to worry about what the content is.

    While the workaround is great, thanks again for it, the CupertinoSegmentedControl do still break its API contract. It is in the example getting a Map<T, Widget> but it just did not work with the particular Widget it was given in some cases.

    Considering this, I'm assuming a permanent fix for this CupertionSegmentedControl hit testing issue will be implemented as well? Maybe the AbsorbPointer is the way to go for it too, maybe not, the Flutter team is better positioned to evaluate the correct approach.

    What occurs to me too though, is if there might be other UI Widgets in Flutter SDK that might suffer from the same issue as this one? Looking into this and addressing them as well, if any are found, might be prudent too.

  10. bleroux commented on May 17, 2020

    @bleroux
    bleroux
    on May 17, 2020
    Contributor

    @rydmike Mike, yes this is only a quick workaround : like you, I think that only someone on the Flutter team, with a really good understanding of hit testing. can pave the way to a fix.
    I don't understand why hit testing is done this way on CupertinoSegmentedControl, maybe there is (or there was) a good reason, so I didn't try to submit a PR that replace this hit testing logic.

  11. fluttergithubbot
    closed this as completedin #57461on May 18, 2020
  12. pcsosinski
    added
    hotfix: 1.17
    on May 19, 2020

  13. tvolkert commented on May 20, 2020

    @tvolkert
    tvolkert
    on May 20, 2020
    Contributor

    eng approval for cp of #57461

  14. pcsosinski
    added
    cp: 1.17
    cp: 1.17 completed
    on May 26, 2020

  15. github-actions commented on Aug 20, 2021

    @github-actions
    github-actionsbot
    on Aug 20, 2021

    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 -v and a minimal reproduction of the issue.

  16. github-actions
    locked as resolved and limited conversation to collaborators on Aug 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

a: fidelityMatching the OEM platforms bettera: qualityA truly polished experiencea: tabletTablets and landscape phonesfound in release: 1.17Found to occur in 1.17frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: cupertino_uicupertino_ui package in flutter/packages

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions