Question 309632 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to prevent overflow error for Row widget?

This is a simple two columns layout for desktop application. The window can be resized to any size even very small like 100×100 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

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    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


  2. 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())
        ],
      ),
    ));
  }
}
    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
  4. 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(),
  ),
    Login or Signup to reply.
  5. 0

    Instead of giving static width of 400 you can make it dynamic using media query. For example:

    lets say your screen width is 600 and and you want your container 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(),),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search