RenderFlex overflow when using SegmentedButton in CustomScrollView

[guplem]

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

1. Create a new project
2. Write the provided code sample
3. Run it (in my case, for web)
4. Decrease the window size so the text in the ButtonSegment must be split into two or more lines.
5. See the overflow error at the bottom

Expected results

The text should be split in multiple lines if necessary without throwing any overflow errors the same way other widgets do.
The expected behaviour can be seen replacing the SegmentedButton for any widget with contents that must be split into multiple lines with reduced width windows like an ElevatedButton:

ElevatedButton(
  onPressed: () {},
  child: const Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultricies, nisl ni"),
)

Actual results

An exception is thrown when the screen width is small, so the text in the ButtonSegment must be split into two or more lines:

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 4.0 pixels on the bottom.

The relevant error-causing widget was: 
  Column Column:file:///K:/GitHub/cabron/lib/main.dart:34:20
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#45c07 OVERFLOWING
...  parentData: paintOffset=Offset(0.0, -177.1)
...  constraints: BoxConstraints(w=767.2, h=911.2)
...  size: Size(767.2, 911.2)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================

Code sample

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Issue with SegmentedButton',
      home: DemoPage(),
    );
  }
}

enum Options {
  a,
  b,
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            hasScrollBody: false,
            child: Column(
              children: [
                SegmentedButton(segments: const [
                  ButtonSegment<Options>(value: Options.a, label: Text("Any text that will be 2 or more lines when the width is too small to fit in a single line")),
                  ButtonSegment<Options>(value: Options.b, label: Text("Any text that will be 2 or more lines when the width is too small to fit in a single line")),
                ], selected: const <Options>{
                  Options.a
                }, onSelectionChanged: (newSelection) {}),
                // SizedBox used to force scrollable column
                SizedBox(height: MediaQuery.of(context).size.height * 1.2, child: const Placeholder()),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

With error (multiple lines of text):

Without error (text in single line):

Logs

No response

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.7.10, on Microsoft Windows [Version 10.0.22621.1702], locale en-150)
    • Flutter version 3.7.10 on channel stable at K:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4b12645012 (6 weeks ago), 2023-04-03 17:46:48 -0700
    • Engine revision ec975089ac
    • Dart version 2.19.6
    • DevTools version 2.20.1

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at C:\Users\guple\AppData\Local\Android\Sdk
    • Platform android-33-ext4, build-tools 33.0.1
    • ANDROID_HOME = C:\Users\guple\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Build Tools 2019 16.11.19)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
    • Visual Studio Build Tools 2019 version 16.11.32901.82
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)

[✓] VS Code (version 1.76.2)
    • VS Code at C:\Users\guple\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.60.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22621.1702]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 113.0.5672.93
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 113.0.1774.42

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[huycozy]

Hi @guplem
The root cause of this is by SizedBox is taking many space in Column. You should wrap it with Flexible or Expanded which will solve the issue.

Fixed code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Issue with SegmentedButton',
      home: DemoPage(),
    );
  }
}

enum Options {
  a,
  b,
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            hasScrollBody: false,
            child: Column(
              children: [
                SegmentedButton(segments: const [
                  ButtonSegment<Options>(value: Options.a, label: Text("Any text that will be 2 or more lines when the width is too small to fit in a single line")),
                  ButtonSegment<Options>(value: Options.b, label: Text("Any text that will be 2 or more lines when the width is too small to fit in a single line")),
                ], selected: const <Options>{
                  Options.a
                }, onSelectionChanged: (newSelection) {}),
                // SizedBox used to force scrollable column
                Flexible(child: SizedBox(height: MediaQuery.of(context).size.height * 1.2, child: const Placeholder())),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Closing this issue since it's not Flutter framework issue. If you disagree, please write in the comments and I will reopen it.

[guplem]

@huycozy I think your conclusion is incorrect.

The overflow error disappears if the SegmentedButton is switched for an ElevatedButton, no need to change the SizedBox.

The SizedBox is there to represent widgets that take that space, so the scrollable function is enabled. I may have text, images, cards etc as a child of the column and I wouldn't be able to apply your fix in that situation.

This is how the code can look with an ElevatedButton, with the same SizedBox and no overflow error:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Issue with SegmentedButton',
      home: DemoPage(),
    );
  }
}

enum Options {
  a,
  b,
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            hasScrollBody: false,
            child: Column(
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: const Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultricies, nisl ni"),
                )
                // SizedBox used to simulate widgets that might need a huge vertical space, so scroll is required
                SizedBox(height: MediaQuery.of(context).size.height * 1.2, child: const Placeholder()),
              ],
            ),
          )
        ],
      ),
    );
  }
}

How shall apply your solution if I have many Text objects instead of a SizedBox? I may have widgets in many configurations that I don't want to expand/flex.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Issue with SegmentedButton',
      home: DemoPage(),
    );
  }
}

enum Options {
  a,
  b,
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            hasScrollBody: false,
            child: Column(
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: const Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultricies, nisl ni"),
                )
                // Many text objects used to simulate widgets that might need a huge vertical space, so scroll is required
                ...List.generate(50, (index) => Text("Text $index")),
              ],
            ),
          )
        ],
      ),
    );
  }
}

[huycozy]

@guplem In case you have many Texts as above, you can try wrap them in a Flexible with SingleChildScrollView as below:

Sample code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Issue with SegmentedButton',
      home: DemoPage(),
    );
  }
}

enum Options {
  a,
  b,
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            hasScrollBody: false,
            child: Column(
              children: [
                // ElevatedButton(
                //   onPressed: () {},
                //   child: const Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultricies, nisl ni"),
                // ),

                SegmentedButton(segments: const [
                  ButtonSegment<Options>(value: Options.a, label: Text("Any text that will be 2 or more lines when the width is too small to fit in a single line")),
                  ButtonSegment<Options>(value: Options.b, label: Text("Any text that will be 2 or more lines when the width is too small to fit in a single line")),
                ], selected: const <Options>{
                  Options.a
                }, onSelectionChanged: (newSelection) {}),

                // Many text objects used to simulate widgets that might need a huge vertical space, so scroll is required
                Flexible(
                  child: ScrollConfiguration(
                    behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          ...List.generate(50, (index) => Text("Text $index")),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

[guplem]

@huycozy those are workarounds and I already found one even before posting this issue. So, I am not looking for them.

I am trying to report a bug.

Is it the expected behavior to have the overflow error disappearing if the SegmentedButton is switched for an ElevatedButton or any other widget (that I have tested)?

I think there is something wrong with the SegmentedButton or ButtonSegment. That overflow makes no sense. There is no overflow error unless the text in the buttons needs to be broken in multiple lines. Something that is handled without issues in any other buttons and other types of widgets.

Please consider reopening the issue to investigate the source of the issue and why this error only happens with the mentioned widgets. Thanks

[huycozy]

Thanks for your response! I got caught up in the Column's assertion error without thinking about the possible error within the SegmentedButton (my bad).

I have checked this again and see the issue could be caused by unconstrained height of SegmentedButton. When I try giving a fixed height for ButtonSegment child, the issue disappears, for eg:

ButtonSegment<Options>(
  value: Options.a,
  label: SizedBox(
    height: 40,
    child: Text(
        "Any text that will be 2 or more lines when the width is too small to fit in a single line"),
  ),
),

I think we can work around this by giving SegmentedButton minimumSize or fixedSize a value, but there is an open issue (#121493) indicating that they are not working as expected currently.

Labeling this issue for further insights. Thank you for your patience!

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.10.1, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.1 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d3d8effc68 (26 hours ago), 2023-05-16 17:59:05 -0700
    • Engine revision b4fb11214d
    • Dart version 3.0.1
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.64.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.11.0-6.0.pre.153, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.11.0-6.0.pre.153 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e49d35d3a6 (35 minutes ago), 2023-05-18 22:26:29 -0400
    • Engine revision bca11a423f
    • Dart version 3.1.0 (build 3.1.0-125.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.64.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.