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
5
Answers
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
To prevent an
Overflow
on yourRow
widget. Instead of using aRow
, useWrap
– which wraps the widgets to the next line when there’s no space:Wrap
.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.
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
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