Flutter web pixeloverflow handling all screen

Question

I want my flutter web app to scroll instead of overflowing, it can be horizontal or vertical. There is not much writings on how to handle responsiveness in flutter web. Should I give widgets exact height and width or should it be like size.width/2 ?

And is there any way for scrolling the whole page instead of overflowing pixels?

Answer 1

For a given direction (either horizontal or vertical), the easiest way is to use a SingleChildScrollView with a Row or Column as its child respectively.

For vertical:

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: Column(...),
);

For horizontal:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(...),
);

You could then use widgets with size relative to the other axis to make it scale in that way. Without knowing your app or layout, it's difficult to know what would work, but here are some ideas (in no particular order):

1. You can use FractionallySizedBoxes to make some Widgets fill up a given fraction of the space on the screen (both horizontal and vertical): https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html
2. You can use the Flexible Widget to give some Widgets a relative size using their flexFactors, and size some widgets proportionally. https://api.flutter.dev/flutter/widgets/Flexible-class.html
3. In the cross-axis direction for a Row/Column, you can have some sized Widgets, and use an Expanded widget to fill up the remaining space. https://api.flutter.dev/flutter/widgets/Expanded-class.html

Just play around with all the mentioned information, and see what works for your app!