Set maximum height and width of Scaffold?

Question

I am trying to build a Flutter web app. My app is currently optimised for phones & tablets however it isn't for desktop. What i'm trying to achieve is if the user opens the website it should show the app like a tablet. and the left and right to be white or a different background color. Something similar to what Instagram has for its iPad version of the app.

Does this answer your question? [Limit max width of Container in Flutter](https://stackoverflow.com/questions/55185288/limit-max-width-of-container-in-flutter) — OMi Shah, Mar 01 '22 at 16:24

score 0 · Answer 1 · answered Mar 01 '22 at 16:49

0

Place your whole app inside a Container with a black Background. Set a certain ratio at which point the black background image gets shown (Width and Height are MediaQuery.of(context).size.width/height)

answered Mar 01 '22 at 16:49

d3nnska

1

Can you give an example? How will I be able to wrap a container on top of a scaffold? – Arnav Mar 01 '22 at 16:57
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 01 '22 at 19:10

Erik Bent · Answer 2 · 2023-04-26T11:46:29.313

I didn't find a good working example for that problem, so I tried a few things myself.

The best working solution I found was to put the MaterialApp or the Scaffold itself into two Containers. The outer one has to be the 'background' container which sets the background color and has alignment set to Alignment.center and the inner container has to be the constrained one with for example constraints: BoxConstraints(maxWidth: 1000).

That would look like:

Container(
   color: Colors.black,
   alignment: Alignment.center,
   child: Container(
      constraints: const BoxConstraints(maxWidth: 1000),
      child: MaterialApp(
         (...)
      ),
   ),
),

The inner box also could be a ConstrainedBox, that probably would be a little bit better for readability:

Container(
   color: Colors.black,
   alignment: Alignment.center,
   child: ConstrainedBox(
      constraints: const BoxConstraints(maxWidth: 1000),
      child: MaterialApp(
         (...)
      ),
   ),
),

You could obviously change for exmaple the alignment if you want the page to always be in the upper left corner, the color of the background and the max and min width and height. For min width and height you then need some kind of scrolling for small screens, but that's probably already out of the scope of the question

Edit: You have to be careful with this solution while using MediaQuery.of(context).size... because it doesn't take the maxWidth of the ConstrainedBox as the device width. I therefore did add some helper functions that I can use instead of MediaQuery.of(context).size...:

static double screenHeight(BuildContext context) {
   return MediaQuery.of(context).size.height;
}

static double screenWidth(BuildContext context) {
   return MediaQuery.of(context).size.width > 1200
      ? 1200
      : MediaQuery.of(context).size.width;
}

You can use these with the normal BuildContext of the build functions of your widgets and you could also change the screenHeight function to include a min or max height check like the screenWidth.

Set maximum height and width of Scaffold?

2 Answers2