I have a flutter app that will be deployed to be embedded inside either an iFrame or another Flutter app via WebView. I’m dynamically getting the height of the page with:
Size size = MediaQuery.of(context).size;
Right now, I have the problem of when I set the screen size to iPhone SE, or I view the web page on an iPhone SE, part of the bottom is getting cut off. To remedy this situation, I thought I could use percentages of the height, so I set the total of the boxes to equal 100% of the screen size. eg:
...
Column(
children:[
Container(
height: size.height * 0.4
...
),
Container(
height: size.height * 0.6
...
),
],
);
But this has the issue of still causing overflow on the smaller screen. So I set the vertical dimensions to something less than a total of 100%.
When I view the web page on a larger screen (say a Samsung Galaxy 20 Ultra), I have a large gap at the bottom. I can’t figure out a way of formatting the page to accommodate both the smaller screen and the larger screen.
Please forgive me if the answer is obvious; I have less than a year in with Flutter.
2
Answers
Avoid MediaQuery for breakpoints. You want to choose based on what’s left, not what’s total. For that, use LayoutBuilder. But the only things you should be doing with that pixelcount is deciding things, like two columns vs three, or side nav vs bottom nav. DO NOT USE FRACTIONS OF PIXELS for anything. That’s the job of the Flex widgets (Column, Row, and friends). And definitely DO NOT RESIZE TEXT BASED ON WIDTH. Please reject any package that even offers that as a choice.
Your question is not clear. But if you don’t have enough space to display content on small screen device, then you have to use ListView.
If you want to device page two or more parts use Expanded / Flex.
Or if you have sample content, paste it here, so that someone get better idea.