在 Tap 上显示 Flutter 文本选择工具栏溢出

Question

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!! Code here Below ....

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

Answer 1

It is the bug in Flutter itself. They going to fix it in future releases. For now you should change

child: Row(mainAxisSize: MainAxisSize.min, children: items), 

in flutter/packages/flutter/lib/src/material/text_selection.dart on line 61 with

child: ListView(
          scrollDirection: Axis.horizontal,
          children: items,
        ),

More details you can find on Flutter github

Answer 2

Warning!

Create a Backup of flutter/packages/flutter/lib/src/material/text_selection.dart else you cant update or upgrade Flutter

I made a little Improvements on SergICE's answer .

In flutter/packages/flutter/lib/src/material/text_selection.dart on Line: 60

Change

return Material(
  elevation: 1.0,
  child: Container(
    height: _kToolbarHeight,
    child: Row(mainAxisSize: MainAxisSize.min, children: items), //Remove This line
    child: _buildTextHandler(items), //add this
  ),
);

now create a method _buildTextHandler(List<Widget> items) in _TextSelectionToolbar Class

  Widget _buildTextHandler(List<Widget> items) {
    if (items.length > 3) {
      return SizedBox(
        width: 300.0,
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: items,
        ),
      );
    } else {
      return Row(mainAxisSize: MainAxisSize.min, children: items);
    }
 }