text selection toolbar over flow !

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

https://ibb.co/k9Rk13M

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.`

@mosala7

Thanks for the issue @mosala7. Can you post the code that reproduces the overflow?

@mosala7

Thanks for the issue @mosala7. Can you post the code that reproduces the overflow?

Thanks for notifying me, code updated in the issue.

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).

@westracer

@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.

@justinmc

@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).

@westracer

@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.

that looks a lot like #36005

Thanks for finding the duplicate. I'll close that one to focus the discussion here.

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? :)

Personally I had to change the App Button Theme's minWidth as a workaround

Is it possible to change the toolbar font size as workaround until this is fixed?

@henriquearthur

@henriquearthur you can try by modifying the ThemeData of the buttonTheme property of the App main theme

The best way I found is to wrap the Row(children: items, mainAxisSize: MainAxisSize.min); with SingleChildScrollView. works perfect.

Getting below error:
RenderBox was not laid out: RenderRepaintBoundary#2f05f relayoutBoundary=up4 NEEDS-PAINT

Long term we'll need to implement the native solution on Android and iOS. Here is what it looks like on Android:

how to do in flutter?, please explain. Thanks

@gokul-a-krishnan

width: 300.0,

@gokul-a-krishnan - I'm intrigued as to why the arbitrary 300 pixel was chosen?
I choose 300 pixel becoz it will hide some text on "select all" so user think it's scrollable (inspired from Realme devices)

@kamleshwebtech

@kamleshwebtech The full solution is under review in #49391, it's not yet released.

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.

Another simple solution I found using the Wrap Widget is the following ...
In flutter\packages\flutter\lib\src\material\text_selection.dart replace 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.0 because it's the threshold value where the toolbar becomes quadratic and looks like this now:

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

Have the exact same issue.

The only fix is to disable the toolbar (Assuming you dont need cut/copy/select etc) until this is fixed...

Easily done with enableInteractiveSelection: false,

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).

@nohli

@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.

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.

Navigation Menu

Repository navigation

text selection toolbar over flow ! #35826

Picture for the problem

Logs

42 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

text selection toolbar over flow ! #35826

Description

Picture for the problem

Logs

Activity

justinmc commented on Jul 10, 2019

mokaily commented on Jul 10, 2019

westracer commented on Jul 11, 2019

justinmc commented on Jul 11, 2019

westracer commented on Jul 12, 2019

justinmc commented on Jul 16, 2019

MCOfficer commented on Jul 19, 2019

justinmc commented on Jul 19, 2019

CloudyPadmal commented on Jul 27, 2019

Nico04 commented on Jul 27, 2019

henriquearthur commented on Jul 28, 2019

Nico04 commented on Jul 28, 2019

42 remaining items

kamleshwebtech commented on Mar 9, 2020

kamleshwebtech commented on Mar 9, 2020

gokul-a-krishnan commented on Mar 9, 2020

justinmc commented on Mar 9, 2020

justinmc commented on Mar 11, 2020

tonikwater commented on Apr 8, 2020

justinmc commented on Apr 14, 2020

nohli commented on Jun 3, 2020

justinmc commented on Jun 4, 2020

github-actions commented on Aug 20, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions