How to prevent overflow error for Row widget?

Question

This is a simple two columns layout for desktop application. The window can be resized to any size even very small like 100x100 thus the content won't fit by design and should be clipped. And normally it's working until I use Row to build the layout

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            // left panel
            Container(
              width: 400,
              child: Placeholder(),
            ),
            // content panel
            Expanded(child: Placeholder())
          ],
        ),
      )
    );
  }
}

Now I'm getting an error like "A RenderFlex overflowed by 3.3 pixels on the right." if I resize the window to a very small size.
So far I've tried to use SingleChildScrollView but found it's working only for Column. Also I've played with ClipRect but don't know how to use it for this case.

Edit: Solution with Warp widget won't help here as moving the widgets doesn't help if they just don't fit - I can resize the window so the width is less than the width of the first row cell. What's more I cannot use Expanded widget for the right cell. Actually this is very common layout with left panel for menu and right for the content

Does this answer your question? Flutter: How to fix overflow in row? — Qori
– Qori, Commented Dec 29, 2023 at 5:10
Actually no. I don't want to move the widgets as wrap does. I want to clip the window content if the window is too small. The workaround I found is to use window_manager package and set minimum width equals to left panel width. But I'm still interested in finding a solution — ra74
– ra74, Commented Dec 29, 2023 at 8:53
you can use singlechild scroll view just add scrollDirection:Axis.horizontal . — Jeel Bhatti
– Jeel Bhatti, Commented Jan 5, 2024 at 11:15

Adrian Mole · Accepted Answer · 2024-01-03 05:09:12Z

1

Instead of giving a static width of 400, you can make it dynamic using media query.

For example, let's say your screen width is 600 and and you want your container to have a width of 400; then, what you can do is simply calculate the width ratio (400*100)/600 = 66.67.

Container(
width: MediaQuery.of(context).size.width * 0.66,  //This will give container the width of 66% of the screen
child: Placeholder(),),

edited Jan 3, 2024 at 5:09

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Dec 29, 2023 at 9:56

Zaidraza Narsinh

112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ra74 Over a year ago

That's good point, I'll use it but won't work if a user resize window to 50pxx50px

Zaidraza Narsinh Over a year ago

On resizing the window the build method will be called again and it will resize the container according to current width.

MendelG · Accepted Answer · 2023-12-29 00:39:46Z

0

To prevent an Overflow on your Row widget. Instead of using a Row, use Wrap - which wraps the widgets to the next line when there's no space:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Wrap( // --> Use Wrap instead of Row
        children: [
          // left panel
          Container(
            width: 400,
            child: Placeholder(),
          ),
          // content panel
          Expanded(child: Placeholder())
        ],
      ),
    ));
  }
}

Here is an official video by the Flutter team, explaining Wrap.

answered Dec 29, 2023 at 0:39

MendelG

20.6k5 gold badges38 silver badges68 bronze badges

1 Comment

ra74 Over a year ago

Wrap cannot contain Expaned widget and I need to fill the remaing space. I'd need sth like github.com/flutter/flutter/pull/136161

cj0x39e · Accepted Answer · 2023-12-29 01:47:03Z

0

The SingleChildScrollView has a scrollDirection property, with the default value being 'Axis.vertical'. It should work fine if you set it to 'Axis.horizontal'.

Additionally, there is a FittedBox widget, which can adapt to changes in parent size.

answered Dec 29, 2023 at 1:47

cj0x39e

1815 bronze badges

1 Comment

ra74 Over a year ago

It's working fine for Column but not for a Row

Winson · Accepted Answer · 2023-12-29 08:31:00Z

0

I think if the layout is dynamic, why you don't try to use percentage for the widget width?

for example, base on the screen width to get the percentage value

 Container(
    width: MediaQuery.of(context).size.width * 0.4,  //40% with screen width
    child: Placeholder(),
  ),

answered Dec 29, 2023 at 8:31

Winson

7876 silver badges19 bronze badges

Comments

ra74 · Accepted Answer · 2023-12-29 11:34:19Z

0

As my question got negative score - not sure why - I'm posting workaround for this I think quite common problem.
I'll use https://pub.dev/packages/window_manager to enforce minimum width of the window so the window width >= left panel width

answered Dec 29, 2023 at 11:34

ra74

1241 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to prevent overflow error for Row widget?

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related