Repository navigation
SelectionArea with a multi-column layout does not work properly #153004
Description
Steps to reproduce
- Use
SelectionAreain Top of the widget - Try to use some Scroll Widget or List View
Expected results
all text that can be selected should only need tap + drag gesture to select the text
Actual results
some Text Widget need to double tap before dragging to select the text .
I found some solution, like use SelectableText each Text. but the cons is the UI can do multiple selection in different widget / location. Any Selection scope for this?
Code sample
Code sample
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Test2 extends StatefulWidget {
@override
State<Test2> createState() => _Test2State();
}
class _Test2State extends State<Test2> {
@override
Widget build(BuildContext context) {
return SelectionArea(
child: Material(
child: Row(
children: [
SizedBox(
width: 16,
),
Container(
padding: EdgeInsets.all(8),
color: Colors.blue,
child: Center(child: Text("Text 0")),
),
SizedBox(
width: 16,
),
Expanded(
child: Container(
color: Colors.red,
padding: EdgeInsets.all(8),
height: 300,
child: ListView(
children: [
SizedBox(
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [Text("Text 1"), Text("Text 2")],
),
),
Divider(
height: 16,
),
Text("Text 3"),
Text("Text 4"),
Text("Text 5"),
Text("Text 6"),
Text("Text 7"),
Text("Text 8"),
],
),
)),
SizedBox(
width: 16,
),
Container(
padding: EdgeInsets.all(8),
color: Colors.blue,
child: Center(child: Text("Text 9")),
),
SizedBox(
width: 16,
),
Container(
padding: EdgeInsets.all(8),
color: Colors.green,
width: 500,
child: SingleChildScrollView(
child: SizedBox(
height: 300,
child: Column(
children: [
Text("Text 10"),
SizedBox(
height: 8,
),
Text("Text 11"),
Text("Text 12"),
Text("Text 13"),
Text("Text 13"),
Text("Text 14"),
Text("Text 15"),
Text("Text 16"),
Text("Text 17"),
],
),
),
),
)
],
),
));
}
}
Screenshots or Video
Screenshots / Video demonstration
Screen.Recording.2024-08-07.at.15.28.40.mov
Logs
Logs
Flutter Doctor:
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
Warning: In index.html:37: Local variable for "serviceWorkerVersion" is deprecated. Use "{{flutter_service_worker_version}}" template token instead.
Warning: In index.html:46: "FlutterLoader.loadEntrypoint" is deprecated. Use "FlutterLoader.load" instead.
This app is linked to the debug service: ws://127.0.0.1:49384/FNVrXC7RIGY=/ws
Debug service listening on ws://127.0.0.1:49384/FNVrXC7RIGY=/ws
Debug service listening on ws://127.0.0.1:49384/FNVrXC7RIGY=/wsFlutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.22.1, on macOS 14.5 23F79 darwin-arm64, locale en-ID)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.91.1)
[✓] Connected device (3 available)
[✓] Network resourcesReacted by Markus Rubey, Pedro Massango and David Miguel Lozano
Activity
darshankawar commentedon Aug 7, 2024
@anggaaryas
Maybe you are hitting #150897 that you can check and confirm, which has been fixed recently #151138.
It doesn't seem to be available in latest stable so you can switch to latest master and re-run your scenario to confirm.
anggaaryas commentedon Aug 7, 2024
@darshankawar still not fixed in master channel.
But i found new behaviour in all flutter version. If i change the
Rowwidget intoColumn, there are Ok, no strange behaviourScreen.Recording.2024-08-07.at.17.54.45.mov
darshankawar commentedon Aug 8, 2024
Thanks for the update. I tried on latest stable and master and observed same behavior. It doesn't select the text at first attempt, we need to double tap and then it lets us select the text. Verified on macOS desktp.
stable, master flutter doctor -v
chunhtai commentedon Aug 22, 2024
seems like maybe a focus issue. cc @Renzo-Olivares
anggaaryas commentedon Sep 26, 2024
Hello, i found another temporary solution. So, we can add
SelectionAreaeach Row children and assign the focusNode. and then, each focus node has listener. if a focus node has focus, unfocus all focus node. So maybe this is really focus issue. especially when usingRow()widget.Screen.Recording.2024-09-26.at.11.47.32.mov
Renzo-Olivares commentedon Sep 27, 2024
Hi @anggaaryas, thanks for reporting this issue. I've started debugging this, and I think part of the issue is with the screen ordering algorithm used by
MultiSelectableSelectionContainerDelegate.I made a smaller minimal reproducible example, the text in the
SingleChildScrollViewis not selectable with tap + drag:SingleChildScrollView:First text widget selectable rect: Rect.fromLTRB(0.0, 15.0, 41.9, 35.0)
Scrollable selectable rect: Rect.fromLTRB(41.9, 0.0, 81.5, 50.0)
In this case the algorithm orders the selectables like: [First text widget, Scrollable], so when we tap and drag on the scrollable, the event goes to the first text widget first, since the tapped position will be somewhere above the first text widget, it will return
SelectionResult.prevand the event dispatch will stop there, never reaching the Scrollable.SingleChildScrollView:First text widget rect: Rect.fromLTRB(0.0, 15.0, 41.9, 35.0)
Scrollable rect: Rect.fromLTRB(41.9, 0.0, 81.5, 20.0)
In this case the algorithm orders the selectables like: [Scrollable, First text widget], so when we tap and drag on the scrollable, the event goes to it first and we are able to select as expected.
The main difference between the rects in both situations is that with the
Scrollable, thebottomof theScrollableselectable rect is lower than the first text widgets rect, which means they overlap vertically, so it defers to a horizontal comparison and gets ordered after the first text widget. I think this is because when wrapping with aScrollableit tries to take up the maximum height of its children, in this case50.0.The reason double tap + drag works is because a double tap, first looks for the selectable with a rect containing the tapped position, rather than starting at the first selectable in order and iterating from there.
anggaaryas commentedon Sep 30, 2024
Thank you for the response. Btw is this related to
_startNewMouseSelectionGesturemethod too? because if we use double tap and triple tap, it will success to select the selected widget. Maybe related to this issue too #142040 . And maybe related to which Selectable candidates that need to add inList<Selectable> selectables(method_flushAdditions) ?kevmoo commentedon Nov 12, 2024
omar-selo commentedon May 26, 2025
[-]Selection Area sometimes need to double click on certain widget[/-][+]SelectionArea with a multi-column layout does not work properly[/+]Renzo-Olivares commentedon Feb 4, 2026
Adding more data points from #179552
Code sample
From my investigation the root cause is as follows:
SelectionUtils.adjustDragOffset+_SelectableFragment._updateSelectionEdgeSequence of events:
Start a drag on some text in the first line of the second column. At this point
SelectionAreawill dispatch a edge update event for the firstRenderParagraphcorresponding to the firstTextwidget in the first column._SelectableFragment._updateSelectionEdgeusesSelectionUtils.adjustDragOffsetand calculates an adjusted position set to the bottom right of the selectable rect. This position is then used to look in the next selectable for the selection withSelectionResult.nextor the previous withSelectionResult.previous. In our case since the adjusted position corresponds with the end of the content in the selectable SelectionResult.next is returned.We then move onto the second
RenderParagraphcorresponding to the second text widget in the first column._SelectableFragment._updateSelectionEdgeusesSelectionUtils.adjustDragOffsetand calculates an adjusted position set to the top left of the selectable rect. This is important since this adjusted position is what prevents us from setting a correct selection. Because the adjusted position is set to the top left, this corresponds to the beginning of the selectable content andSelectionResult.previousis returned. This puts us at the first text widget in the first column again, so we can never reach the selectable in the second column which is where we expect our selection to start.Selectable order is correct here in this scenario but we still can't reach the selectable we want.