Scale whole app or widget contents to a screen size in Flutter

Image for post
Image for post
Scaling whole app

Starting from the most internal part:

  • SizedBox, to hard code a logical dimensions of the area that will be used by a child widget.
  • FittedBox, to scale its child to entirely fit the parent, maintaining its proportions.
  • Container, to set the background color of unused parts of the screen.
  • SizedBox.expand, to scale the background container to fit the whole screen.

To have a full example, below are the contents of the screen, but they are not an important part here.

Android developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store