Skip to content

Out-of-the-box traversal order strange for overlapping elements #14681

Closed
Closed
Out-of-the-box traversal order strange for overlapping elements#14681
Labels
a: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)frameworkflutter/packages/flutter repository. See also f: labels.

Description

@goderbauer
goderbauer
opened on Feb 13, 2018

Lets say you have two list elements, which are both overlayed by a FAB. The out-of-the-box traversal order is: List element 1, FAB, List element 2.

Expected order: List element 1, List element 2, FAB.

/cc @gspencergoog

Activity

  1. goderbauer
    added
    a: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)
    on Feb 13, 2018

  2. goderbauer commented on Feb 14, 2018

    @goderbauer
    goderbauer
    on Feb 14, 2018
    MemberAuthor

    I believe, the default geometric order should take app structure into account. E.g. If nodes are in a list, the default traversal order should be to go through all items of the list first and then move focus to potentially overlapping UI elements.

    In other words: We should probably only sort the children of each node geometrically within the set of children, not globally.

    This is how it used to work when geometric sorting happened on the platform side. I believe, this is a regression of #14539.

  3. zoechi
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Dec 4, 2018

  4. markusaksli-nc commented on Jul 27, 2020

    @markusaksli-nc
    markusaksli-nc
    on Jul 27, 2020
    Contributor

    Closing as this seems fixed by #21235, feel free to reopen if this is not the case.

    Minimal reproducible code sample 
    import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   final title = 'Horizontal List';

   return MaterialApp(
     title: title,
     showSemanticsDebugger: true,
     home: Scaffold(
       appBar: AppBar(
         title: Text(title),
       ),
       body: Container(
         margin: EdgeInsets.symmetric(vertical: 20.0),
         height: 200.0,
         child: Scaffold(
           floatingActionButton: FloatingActionButton(onPressed: null),
           body: ListView(
             scrollDirection: Axis.horizontal,
             children: <Widget>[
               Semantics(
                 label: "First element of list",
                 child: Container(
                   width: 200.0,
                   color: Colors.red,
                 ),
               ),
               Semantics(
                 label: "Second element of list",
                 child: Container(
                   width: 200.0,
                   color: Colors.blue,
                 ),
               ),
               Semantics(
                 label: "Third element of list",
                 child: Container(
                   width: 200.0,
                   color: Colors.orange,
                 ),
               ),
             ],
           ),
         ),
       ),
     ),
   );
 }
}
    Traversal order 
    I/flutter ( 8810): SemanticsNode#0
I/flutter ( 8810):  │ Rect.fromLTRB(0.0, 0.0, 1080.0, 2028.0)
I/flutter ( 8810):  │
I/flutter ( 8810):  └─SemanticsNode#34
I/flutter ( 8810):    │ Rect.fromLTRB(0.0, 0.0, 392.7, 737.5) scaled by 2.8x
I/flutter ( 8810):    │ textDirection: ltr
I/flutter ( 8810):    │
I/flutter ( 8810):    └─SemanticsNode#35
I/flutter ( 8810):      │ Rect.fromLTRB(0.0, 0.0, 392.7, 737.5)
I/flutter ( 8810):      │ sortKey: OrdinalSortKey#29567(order: 0.0)
I/flutter ( 8810):      │
I/flutter ( 8810):      └─SemanticsNode#36
I/flutter ( 8810):        │ Rect.fromLTRB(0.0, 0.0, 392.7, 737.5)
I/flutter ( 8810):        │ flags: scopesRoute
I/flutter ( 8810):        │
I/flutter ( 8810):        ├─SemanticsNode#44
I/flutter ( 8810):        │ │ Rect.fromLTRB(0.0, 0.0, 392.7, 80.0)
I/flutter ( 8810):        │ │ thickness: 4.0
I/flutter ( 8810):        │ │
I/flutter ( 8810):        │ └─SemanticsNode#45
I/flutter ( 8810):        │     Rect.fromLTRB(16.0, 40.5, 147.0, 63.5)
I/flutter ( 8810):        │     flags: isHeader, namesRoute
I/flutter ( 8810):        │     label: "Horizontal List"
I/flutter ( 8810):        │     textDirection: ltr
I/flutter ( 8810):        │     elevation: 4.0
I/flutter ( 8810):        │
I/flutter ( 8810):        ├─SemanticsNode#37
I/flutter ( 8810):        │ │ Rect.fromLTRB(0.0, 100.0, 392.7, 300.0)
I/flutter ( 8810):        │ │
I/flutter ( 8810):        │ └─SemanticsNode#41
I/flutter ( 8810):        │   │ Rect.fromLTRB(0.0, 0.0, 392.7, 200.0)
I/flutter ( 8810):        │   │ actions: scrollLeft
I/flutter ( 8810):        │   │ flags: hasImplicitScrolling
I/flutter ( 8810):        │   │ scrollChildren: 3
I/flutter ( 8810):        │   │ scrollIndex: 0
I/flutter ( 8810):        │   │ scrollExtentMin: 0.0
I/flutter ( 8810):        │   │ scrollPosition: 0.0
I/flutter ( 8810):        │   │ scrollExtentMax: 207.3
I/flutter ( 8810):        │   │
I/flutter ( 8810):        │   ├─SemanticsNode#38
I/flutter ( 8810):        │   │   Rect.fromLTRB(0.0, 0.0, 200.0, 200.0)
I/flutter ( 8810):        │   │   tags: RenderViewport.twoPane
I/flutter ( 8810):        │   │   label: "First element of list"
I/flutter ( 8810):        │   │   textDirection: ltr
I/flutter ( 8810):        │   │
I/flutter ( 8810):        │   ├─SemanticsNode#39
I/flutter ( 8810):        │   │   Rect.fromLTRB(200.0, 0.0, 392.7, 200.0)
I/flutter ( 8810):        │   │   tags: RenderViewport.twoPane
I/flutter ( 8810):        │   │   label: "Second element of list"
I/flutter ( 8810):        │   │   textDirection: ltr
I/flutter ( 8810):        │   │
I/flutter ( 8810):        │   └─SemanticsNode#40
I/flutter ( 8810):        │       Rect.fromLTRB(400.0, 0.0, 600.0, 200.0)
I/flutter ( 8810):        │       tags: RenderViewport.twoPane
I/flutter ( 8810):        │       flags: isHidden
I/flutter ( 8810):        │       HIDDEN
I/flutter ( 8810):        │       label: "Third element of list"
I/flutter ( 8810):        │       textDirection: ltr
I/flutter ( 8810):        │
I/flutter ( 8810):        └─SemanticsNode#42
I/flutter ( 8810):          │ merge boundary ⛔️
I/flutter ( 8810):          │ Rect.fromLTRB(0.0, 0.0, 56.0, 56.0) with transform
I/flutter ( 8810):          │ [1.0,2.4492935982947064e-16,0.0,320.72727272727275;
I/flutter ( 8810):          │ -2.4492935982947064e-16,1.0,0.0,228.0; 0.0,0.0,1.0,0.0;
I/flutter ( 8810):          │ 0.0,0.0,0.0,1.0]
I/flutter ( 8810):          │
I/flutter ( 8810):          └─SemanticsNode#43
I/flutter ( 8810):              merged up ⬆️
I/flutter ( 8810):              Rect.fromLTRB(0.0, 0.0, 56.0, 56.0)
I/flutter ( 8810):              flags: isButton, hasEnabledState
I/flutter ( 8810):              thickness: 6.0
I/flutter ( 8810):
    flutter doctor -v 
    [√] Flutter (Channel master, 1.21.0-6.0.pre.38, on Microsoft Windows [Version 10.0.18362.959], locale et-EE)
   • Flutter version 1.21.0-6.0.pre.38 at C:\Development\flutter_master
   • Framework revision 8e0eee9008 (2 hours ago), 2020-07-26 23:38:01 -0700
   • Engine revision 626244a72c
   • Dart version 2.9.0 (build 2.9.0-21.0.dev a3815b6590)


[√] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
   • Android SDK at C:\Users\Isa\AppData\Local\Android\sdk
   • Platform android-30, build-tools 30.0.0
   • Java binary at: C:\Users\Isa\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763\jre\bin\java
   • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
   • All Android licenses accepted.

[√] Chrome - develop for the web
   • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.6.4)
   • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
   • Visual Studio Community 2019 version 16.6.30309.148
   • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.0)
   • Android Studio at C:\Users\Isa\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763
   • Flutter plugin version 47.1.2
   • Dart plugin version 193.7361
   • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.47.2)
   • VS Code at C:\Users\Isa\AppData\Local\Programs\Microsoft VS Code
   • Flutter extension version 3.12.2

[√] Connected device (5 available)
   • sdk gphone x86 (mobile)     • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
   • sdk gphone x86 arm (mobile) • emulator-5556 • android-x86    • Android 11 (API 30) (emulator)
   • Windows (desktop)           • windows       • windows-x64    • Microsoft Windows [Version 10.0.18362.959]
   • Web Server (web)            • web-server    • web-javascript • Flutter Tools
   • Chrome (web)                • chrome        • web-javascript • Google Chrome 84.0.4147.89

• No issues found!
  5. markusaksli-nc
    closed this as completedon Jul 27, 2020

  6. github-actions commented on Aug 18, 2021

    @github-actions
    github-actionsbot
    on Aug 18, 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.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)frameworkflutter/packages/flutter repository. See also f: labels.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions