Repository navigation
text selection toolbar over flow ! #35826
Description
A problem happens in TextFormField Widget when trying to select part of the input text the Selection toolbar show up but not normally it overflow by 3.0 pixels from the right!!!
The funny part that it left more than 3.0 pixels from the left side of screen which its not centered!!
Picture for the problem
Logs
`Container(
height:
MediaQuery.of(context).size.height * 0.25,
margin: EdgeInsets.fromLTRB(marginFixed * 0.5,
0.0, marginFixed * 0.5, marginFixed * 0.5),
child: TextField(
enableInteractiveSelection: true,
expands: true,
controller: _noteController,
style: TextStyle(
color: StyleCustom.txtPrimary,
fontSize: 16.0),
maxLines: null,
minLines: null,
decoration: InputDecoration(
hintStyle: TextStyle(
color: StyleCustom.txtSecondry),
border: InputBorder.none,
hintText: 'write your note here',
),
onChanged: (String value) {
debugPrint(value);
},
),
),`
`
I/flutter ( 5019): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 5019): The following assertion was thrown during layout:
I/flutter ( 5019): A RenderFlex overflowed by 3.0 pixels on the right.
I/flutter ( 5019):
I/flutter ( 5019): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter ( 5019): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 5019): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 5019): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 5019): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 5019): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 5019): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 5019): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 5019): like a ListView.
I/flutter ( 5019): The specific RenderFlex in question is: RenderFlex#70842 relayoutBoundary=up4 OVERFLOWING:
I/flutter ( 5019): creator: Row ← ConstrainedBox ← Container ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter ( 5019): _InkFeatures-[GlobalKey#e7167 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
I/flutter ( 5019): PhysicalModel ← AnimatedPhysicalModel ← Material ← _TextSelectionToolbar ← CustomSingleChildLayout
I/flutter ( 5019): ← ⋯
I/flutter ( 5019): parentData: <none> (can use size)
I/flutter ( 5019): constraints: BoxConstraints(0.0<=w<=360.0, h=44.0)
I/flutter ( 5019): size: Size(360.0, 44.0)
I/flutter ( 5019): direction: horizontal
I/flutter ( 5019): mainAxisAlignment: start
I/flutter ( 5019): mainAxisSize: min
I/flutter ( 5019): crossAxisAlignment: center
I/flutter ( 5019): textDirection: ltr
I/flutter ( 5019): verticalDirection: down
I/flutter ( 5019): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 5019): ════════════════════════════════════════════════════════════════════════════════════════════════════`
`[√] Flutter (Channel stable, v1.7.8+hotfix.2, on Microsoft Windows [Version 10.0.17763.557], locale en-US)
• Flutter version 1.7.8+hotfix.2 at C:\src\flutter
• Framework revision 2e540931f7 (7 days ago), 2019-07-02 09:31:07 -0700
• Engine revision b1cb0d9e9b
• Dart version 2.4.0
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at C:\Users\midos\AppData\Local\Android\sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-28, build-tools 28.0.3
• Java binary at: C:\Program Files\Java\jdk1.8.0_211\bin\java
• Java version Java(TM) SE Runtime Environment (build 1.8.0_211-b12)
• All Android licenses accepted.
[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/setup/#android-setup for detailed instructions).
[√] IntelliJ IDEA Community Edition (version 2019.1)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.1.3
• Flutter plugin version 36.0.4
• Dart plugin version 191.7479.14
[√] VS Code, 64-bit edition (version 1.36.0)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 3.2.0
[√] Connected device (1 available)
• COR L29 • XTX7N18A31001552 • android-arm64 • Android 8.1.0 (API 27)
! Doctor found issues in 1 category.`
Activity
justinmc commentedon Jul 10, 2019
Thanks for the issue @mosala7. Can you post the code that reproduces the overflow?
mokaily commentedon Jul 10, 2019
Thanks for notifying me, code updated in the issue.
westracer commentedon Jul 11, 2019
I am experiencing the same problem. Material toolbar overflows almost every time when using russian localization (because words are quite long). Wrapping _TextSelectionToolbar in SingleChildScrollView with horizontal scroll axis could help (/material/text_selection.dart:176).
justinmc commentedon Jul 11, 2019
@westracer Does this happen on native Android as well with a Russian locale? Does native handle it by scrolling the menu horizontally?
It seems like we should definitely handle the possibility of the selection menu being wider than the screen. I don't see this happening on a simulated Pixel 2, but I imagine it could be common on narrower phones and other locales.
westracer commentedon Jul 12, 2019
@justinmc Yes, it happens. I've seen multiple ways to handle overflow on native Android. For example, rendering "more" button that shows overflowed buttons in a dropdown list ( https://i.imgur.com/Up9iMZj.png https://i.imgur.com/p6tjkjB.png ), making whole toolbar scrollable or just clipping text and removing padding for every toolbar button.
In native iOS, to see overflowed buttons you need to press "right arrow" and it will show you next set of buttons (https://i.imgur.com/D6Ac1KG.png).
justinmc commentedon Jul 16, 2019
@westracer Thanks for the screenshots. We should probably support both of these. I see the "more" button solution in the native Google Keep app on Android, so that should probably be our Android solution, along with the right arrow on iOS.
This will be even more important if we support custom items in the selection menu.
MCOfficer commentedon Jul 19, 2019
that looks a lot like #36005
justinmc commentedon Jul 19, 2019
Thanks for finding the duplicate. I'll close that one to focus the discussion here.
CloudyPadmal commentedon Jul 27, 2019
When the screen is wide enough to fit the whole menu, this issue doesn't occur. I'm also having this issue where it doesn't happen in emulator when the screen is wide but in my real device where the screen width is smaller. Anyone have a workaround? :)
Nico04 commentedon Jul 27, 2019
Personally I had to change the App Button Theme's minWidth as a workaround
henriquearthur commentedon Jul 28, 2019
Is it possible to change the toolbar font size as workaround until this is fixed?
Nico04 commentedon Jul 28, 2019
@henriquearthur you can try by modifying the ThemeData of the buttonTheme property of the App main theme
42 remaining items
kamleshwebtech commentedon Mar 9, 2020
Getting below error:
RenderBox was not laid out: RenderRepaintBoundary#2f05f relayoutBoundary=up4 NEEDS-PAINT
kamleshwebtech commentedon Mar 9, 2020
how to do in flutter?, please explain. Thanks
gokul-a-krishnan commentedon Mar 9, 2020
justinmc commentedon Mar 9, 2020
@kamleshwebtech The full solution is under review in #49391, it's not yet released.
justinmc commentedon Mar 11, 2020
This has now been fixed in master with #50935. iOS fix is in the works. I'll link to it when I open a PR.
tonikwater commentedon Apr 8, 2020
Another simple solution I found using the
Wrap Widgetis the following ...In
flutter\packages\flutter\lib\src\material\text_selection.dartreplace line 60 with this:child: Wrap(direction: Axis.vertical, children: items),and line 21 with this:
const double _kToolbarHeight = 96.0;I set the height to
96.0because it's the threshold value where the toolbar becomes quadratic and looks like this now:justinmc commentedon Apr 14, 2020
The iOS solution (#54140) has been merged.
Check the version tags on the merge commits to see what version these fixes will end up in.
Android: 4841a7e
iOS: f646e26
nohli commentedon Jun 3, 2020
Has anyone addressed the vertical overflow?
Like in this issue: #58512
The font size should have a minimum and maximum - like the native iOS controls have.
Right now it looks bad with a small iOS font size and it doesn't fit with a large font size (not even through accesibility, a regular larger iOS font size).
justinmc commentedon Jun 4, 2020
@nohli Can you open a new issue to track the vertical size problems? I don't think there's an open issue about that right now.
github-actions commentedon 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 -vand a minimal reproduction of the issue.