Repository navigation
[BUG] Scrollviews no longer work together after 3.10 #127017
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
- flutter downgrade 3.7.12
- run application and observe the scroll behaviour
- flutter upgrade
- run the application and observe how the scroll views no longer work
Expected results
Scrollview to behave as they did in 3.7.12
Actual results
Scrollviews no long work correctly
Code sample
import 'dart:math';
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 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,
),
),
),
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
No response
Flutter Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.0, on macOS 13.2.1 22D68 darwin-arm64)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2021.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1)
[✓] VS Code (version 1.78.0)
[✓] Connected device (2 available)
[✓] Network resources
Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listEntering text in a text field or keyboard related problemsIt was better in the past than it is nowflutter/packages/flutter/gestures repository.Viewports, list views, slivers, etc.Found to occur in 3.10Found to occur in 3.11flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work oniOS applications specificallyIssue is closed as already fixed in a newer versionOwned by iOS platform teamTriaged by iOS platform team
Activity
danagbemava-nc commentedon May 17, 2023
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
minhx3 commentedon May 19, 2023
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
MousyBusiness commentedon May 21, 2023
@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
danagbemava-nc commentedon May 22, 2023
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 recordings
iOS
PXL_20230522_073625404.ACTIVE.TS.mp4
PXL_20230522_072824987.TS.mp4
macOS (Chrome has a similar behavior)
Screen.Recording.2023-05-22.at.07.24.21.mov
android
screen-20230522-073801.mp4
flutter doctor -v
11 remaining items
MousyBusiness commentedon Jun 13, 2023
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
MousyBusiness commentedon Jun 13, 2023
@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):
Renzo-Olivares commentedon Jun 20, 2023
@MousyBusiness sorry for the late reply. The workaround I posted should still work in this case. You just have to move the added
MediaQuerywidget to encapsulate theGestureDetectorthat contains thescalingso theScaleGestureRecognizercan also beat theTextFieldsTapAndHorizontalDragGestureRecognizer. Let me know if that works for you.urusaich commentedon Jan 31, 2024
@Renzo-Olivares this workaround is very dirty but works! Thanks you!
Fix `TextField` horizontal drag conflicts (#147341)
github-actions commentedon May 16, 2024
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 -vand a minimal reproduction of the issue.