[BUG] Scrollviews no longer work together after 3.10 #127017
Assignees
Labels
a: text input
Entering text in a text field or keyboard related problems
c: regression
It was better in the past than it is now
f: gestures
flutter/packages/flutter/gestures repository.
f: scrolling
Viewports, list views, slivers, etc.
found in release: 3.10
Found to occur in 3.10
found in release: 3.11
Found to occur in 3.11
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P2
Important issues not at the top of the work list
platform-ios
iOS applications specifically
r: fixed
Issue is closed as already fixed in a newer version
team-ios
Owned by iOS platform team
triaged-ios
Triaged by iOS platform team
Comments
|
Hi @MousyBusiness, what platform(s) are you experiencing this issue on? Can you also share a recording of what the expected behavior is and what you're experiencing? Thank you |
danagbemava-nc
added
the
waiting for customer response
|
I am facing the same problem, in version 3.7.12 SingleScrollView auto scrolling up when keyboard focus is from 3.10.0 onwards not working |
|
@danagbemava-nc The testing was done on iPad. The video would not be extremely obvious what is happen, as the scroll view simply doesn't work. The expected behaviour is that horizontal and vertical scrolling combined enables the user to pan the text in the x and y axis |
github-actions
bot
removed
the
waiting for customer response
|
Thanks for the details. I can reproduce the issue but only on iOS. I tested on macOS, chrome & android and these devices worked just fine. On iOS, this failed on the current stable & master whether or not impeller was used but it worked just fine on stable 3.7.12. A few recordingsiOS
macOS (Chrome has a similar behavior)Screen.Recording.2023-05-22.at.07.24.21.movandroidscreen-20230522-073801.mp4flutter doctor -v |
danagbemava-nc
added
c: regression
I'm facing the exact same issue. |
@danagbemava-nc is it possible to know how soon this issue will be resolved? |
|
@Renzo-Olivares since this is a TextField, could some of the cases for nested scrolling and text fields that you've been working on be related? |
Piinks
added
a: text input
|
@Piinks it is unfortunately. A similar issue was reported in #124421 and I have a temporary workaround / explanation of the context of the issue here #124421 (comment). A similar workaround also works in this case by wrapping the I think I actually misspoke in that original explanation when I said the default From further investigation it looks like the following is happening.
A drag happens:
The workaround, described works around this issue by giving import 'dart:math';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TextEditingController _controller = TextEditingController();
@override
void initState() {
super.initState();
_controller.text = """Tweak directional focus traversal by @gspencergoog in 116230
[framework] make ImageFiltered a repaint boundary by @jonahwilliams in 116385
[CP] Fix Snackbar TalkBack regression by @esouthren in 116417
Add widget of the week videos by @tvolkert in 116451
Speed up first asset load by encoding asset manifest in binary rather than JSON by @andrewkolos in 113637
Improve Flex layout comment by @loic-sharma in 116004
Do not parse stack traces in _findResponsibleMethod on Web platforms that use a different format by @jason-simmons in 115500
Support theming CupertinoSwitchs by @guidezpl in 116510
Fix MenuAnchor padding by @gspencergoog in 116573
Add ListenableBuilder with examples by @gspencergoog in 116543
Time picker precursors by @gspencergoog in 116450
Date picker special labeling for currentDate with localization and te… by @harperl-lgtm in 116433
Adds API in semanticsconfiguration to decide how to merge child semanticsConfigurations by @chunhtai in 110730
Revert “Speed up first asset load by encoding asset manifest in binary rather than JSON” by @CaseyHillers in 116662
Reland “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 115776
Revert “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 116675
LookupBoundary by @goderbauer in 116429
Reland “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 116676
Fix wrong position of TabBarIndicator when it’s label size and has label padding by @zmtzawqlp in 116398
Add CupertinoSliverNavigationBar large title magnification on over scroll by @ivirtex in 110127
Update text field input width when there are prefix/suffix icons by @hangyujin in 116690
Add Material 3 support for ListTile - Part 1 by @TahaTesser in 116194
MediaQuery as InheritedModel by @moffatman in 114459
Add LookupBoundary to Material by @goderbauer in 116736
Floating cursor cleanup by @moffatman in 116746
Revert “Adds API in semanticsconfiguration to decide how to merge child semanticsConfigurations” by @CaseyHillers in 116839
More gracefully handle license loading failures by @Hixie in 87841
Taboo the word “simply” from our API documentation. by @Hixie in 116061
Fix NavigationBar ripple for non-default NavigationDestinationLabelBehavior by @TahaTesser in 116888
Add LookupBoundary to Overlay by @goderbauer in 116741
[framework] make opacity widget create a repaint boundary by @j""";
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
_recomputeLongestLine();
setState(() {});
});
}
String _longestLine = '';
void _recomputeLongestLine() {
_longestLine = '';
final _lines = _controller.text.split('\n');
final buf = <String>[];
for (var k = 0; k < _lines.length; k++) {
buf.add((k + 1).toString());
}
// Find longest line
_longestLine = '';
for (var line in _lines) {
if (line.length > _longestLine.length) _longestLine = line;
}
print("Longest: ${_longestLine}");
}
Widget _buildLongestLinePlaceHolder(double minWidth) {
return ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 0,
minWidth: max(minWidth, 0),
),
child: Padding(
padding: const EdgeInsets.only(right: 16),
child: Text(_longestLine, style: TextStyle(fontSize: 16)),
), // Add extra padding
);
}
Widget _wrapInHorizontalScrollView({required Widget child}) {
return LayoutBuilder(builder: (context, constraints) {
return MediaQuery(
data: const MediaQueryData(
gestureSettings: DeviceGestureSettings(touchSlop: 8.0)
),
child: SingleChildScrollView(
clipBehavior: Clip.none,
scrollDirection: Axis.horizontal,
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildLongestLinePlaceHolder(constraints.maxWidth),
child,
],
),
),
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
height: 600,
width: 600,
color: Colors.yellowAccent,
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: _wrapInHorizontalScrollView(
child: TextField(
scrollPhysics: const NeverScrollableScrollPhysics(),
scrollPadding: EdgeInsets.zero,
controller: _controller,
keyboardType: TextInputType.multiline,
decoration: null,
maxLines: null,
enabled: true,
onChanged: (t) {},
readOnly: false,
clipBehavior: Clip.none,
),
),
),
),
),
);
}
} |
Piinks
added
c: regression
|
@Renzo-Olivares This workaround fixes the nested scrolling, but it still has another issue which is that a parent gesture detector doesn't get onScale events in the horizontal axis (vertical works). |
|
@MousyBusiness do you have a reproducible example I can test out? |
|
Try this @Renzo-Olivares. I've clamped the scrollviews and put them into a gesture detector with a transform for a bit of visual feedback. You'll notice that when touching the yellow text, you can move vertically, but you cannot move horizontally. This behaviour did not exist in 3.7.12 |
|
@Renzo-Olivares it actually still happens if you remove both scroll views. The source of the event absorb seems to be these lines in TextField (line 1477): Specifically the drag selection in text_selection.dart (line 2852): |
|
@MousyBusiness sorry for the late reply. The workaround I posted should still work in this case. You just have to move the added import 'dart:math';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TextEditingController _controller = TextEditingController();
@override
void initState() {
super.initState();
_controller.text = """Tweak directional focus traversal by @gspencergoog in 116230
[framework] make ImageFiltered a repaint boundary by @jonahwilliams in 116385
[CP] Fix Snackbar TalkBack regression by @esouthren in 116417
Add widget of the week videos by @tvolkert in 116451
Speed up first asset load by encoding asset manifest in binary rather than JSON by @andrewkolos in 113637
Improve Flex layout comment by @loic-sharma in 116004
Do not parse stack traces in _findResponsibleMethod on Web platforms that use a different format by @jason-simmons in 115500
Support theming CupertinoSwitchs by @guidezpl in 116510
Fix MenuAnchor padding by @gspencergoog in 116573
Add ListenableBuilder with examples by @gspencergoog in 116543
Time picker precursors by @gspencergoog in 116450
Date picker special labeling for currentDate with localization and te… by @harperl-lgtm in 116433
Adds API in semanticsconfiguration to decide how to merge child semanticsConfigurations by @chunhtai in 110730
Revert “Speed up first asset load by encoding asset manifest in binary rather than JSON” by @CaseyHillers in 116662
Reland “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 115776
Revert “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 116675
LookupBoundary by @goderbauer in 116429
Reland “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 116676
Fix wrong position of TabBarIndicator when it’s label size and has label padding by @zmtzawqlp in 116398
Add CupertinoSliverNavigationBar large title magnification on over scroll by @ivirtex in 110127
Update text field input width when there are prefix/suffix icons by @hangyujin in 116690
Add Material 3 support for ListTile - Part 1 by @TahaTesser in 116194
MediaQuery as InheritedModel by @moffatman in 114459
Add LookupBoundary to Material by @goderbauer in 116736
Floating cursor cleanup by @moffatman in 116746
Revert “Adds API in semanticsconfiguration to decide how to merge child semanticsConfigurations” by @CaseyHillers in 116839
More gracefully handle license loading failures by @Hixie in 87841
Taboo the word “simply” from our API documentation. by @Hixie in 116061
Fix NavigationBar ripple for non-default NavigationDestinationLabelBehavior by @TahaTesser in 116888
Add LookupBoundary to Overlay by @goderbauer in 116741
Revert “Speed up first asset load by encoding asset manifest in binary rather than JSON” by @CaseyHillers in 116662
Reland “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 115776
Revert “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 116675
LookupBoundary by @goderbauer in 116429
Reland “Use semantics label for backbutton and closebutton for Android” by @chunhtai in 116676
Fix wrong position of TabBarIndicator when it’s label size and has label padding by @zmtzawqlp in 116398
Add CupertinoSliverNavigationBar large title magnification on over scroll by @ivirtex in 110127
Update text field input width when there are prefix/suffix icons by @hangyujin in 116690
Add Material 3 support for ListTile - Part 1 by @TahaTesser in 116194
MediaQuery as InheritedModel by @moffatman in 114459
Add LookupBoundary to Material by @goderbauer in 116736
Floating cursor cleanup by @moffatman in 116746
Revert “Adds API in semanticsconfiguration to decide how to merge child semanticsConfigurations” by @CaseyHillers in 116839
More gracefully handle license loading failures by @Hixie in 87841
Taboo the word “simply” from our API documentation. by @Hixie in 116061
Fix NavigationBar ripple for non-default NavigationDestinationLabelBehavior by @TahaTesser in 116888
Add LookupBoundary to Overlay by @goderbauer in 116741
[framework] make opacity widget create a repaint boundary by @j""";
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
_recomputeLongestLine();
setState(() {});
});
}
String _longestLine = '';
void _recomputeLongestLine() {
_longestLine = '';
final _lines = _controller.text.split('\n');
final buf = <String>[];
for (var k = 0; k < _lines.length; k++) {
buf.add((k + 1).toString());
}
// Find longest line
_longestLine = '';
for (var line in _lines) {
if (line.length > _longestLine.length) _longestLine = line;
}
print("Longest: ${_longestLine}");
}
Widget _buildLongestLinePlaceHolder(double minWidth) {
return ConstrainedBox(
constraints: BoxConstraints(
maxHeight: 0,
minWidth: max(minWidth, 0),
),
child: Padding(
padding: const EdgeInsets.only(right: 16),
child: Text(_longestLine, style: TextStyle(fontSize: 16)),
), // Add extra padding
);
}
Widget _wrapInHorizontalScrollView({required Widget child}) {
return LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
clipBehavior: Clip.none,
scrollDirection: Axis.horizontal,
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildLongestLinePlaceHolder(constraints.maxWidth),
child,
],
),
),
);
});
}
Offset _lastFocalPoint = Offset.zero;
Matrix4 matrix = Matrix4.identity();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: MediaQuery(
data: const MediaQueryData(gestureSettings: DeviceGestureSettings(touchSlop: 8.0)),
child: GestureDetector(
onScaleStart: (d) {
_lastFocalPoint = d.focalPoint;
print("Scale start");
},
onScaleUpdate: (d) {
print("Scale update");
Offset delta = d.focalPoint - _lastFocalPoint;
final m1 = Matrix4.identity()
..translate(delta.dx, delta.dy)
..multiply(matrix);
matrix = m1;
_lastFocalPoint = d.focalPoint;
setState(() {});
},
onScaleEnd: (_) {
print("Scale end");
},
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.red.withOpacity(0.1),
child: Stack(
children: [
Transform(
transform: matrix,
child: Container(
height: 600,
width: 600,
color: Colors.yellowAccent,
child: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: _wrapInHorizontalScrollView(
child: TextField(
scrollPhysics: const NeverScrollableScrollPhysics(),
scrollPadding: EdgeInsets.zero,
controller: _controller,
keyboardType: TextInputType.multiline,
decoration: null,
maxLines: null,
enabled: true,
onChanged: (t) {},
readOnly: false,
clipBehavior: Clip.none,
),
),
),
),
)
],
),
),
),
),
);
}
} |
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-ios
Closed
2 tasks
|
@Renzo-Olivares this workaround is very dirty but works! Thanks you! |
9 tasks
danagbemava-nc
added
the
r: fixed
|
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 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Is there an existing issue for this?
Steps to reproduce
Expected results
Scrollview to behave as they did in 3.7.12
Actual results
Scrollviews no long work correctly
Code sample
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
No response
Flutter Doctor output
The text was updated successfully, but these errors were encountered: