Design of the web I am building
I am trying to build the website as per the design, however I have been getting overflowed errors.
I am looking for advice/s on how I can avoid these errors, I am using a LayoutBuilder and getting the maxWdth and maxHeight, I then scale the sizes of my widgets using this two constraints. The whole page is in a SingleChildScrollView, except the navigation bar which is in the Appbar.
Any advise on how I can achieve a responsive page with no overflowed errors?
Ideas on the widgets that I can use for the components of the page, would be appreciated.
(I want to have a website that scales with screensize.)
2
Answers
Maybe try using constraints in the container using these
size.width
orsize.height
You can also using
SingleChildScrollView()
to handle the overflow.Use
Expanded
s,Flexible
s, in combination withRow
s andColumn
s. This will allow you to make the content dynamically resize.You can also use this to get the maximum screen height and width dynamically, which will update automatically upon the user resizing their screen:
var size = MediaQuery.of(context).size
where you can do:print(size.height)
andprint(size.width)
to get the max height/width values of the screen.Also, you can wrap content in the
SingleChildScrollView
widget that will allow content to overflow, but then be scrollable as well.