What are MediaQuery’s padding, viewPadding and viewInsets?

Published in

Flutter Community

3 min readOct 5, 2022

This article aims to help you better understand what are Flutter’s MediaQueryData (and BindingBase.window) padding, viewPadding, and viewInsets properties.

Let’s start with an excerpt from the MediaQueryData documentation:

This diagram illustrates how padding relates to viewPadding and viewInsets, shown here in its simplest configuration, as the difference between the two. In cases when the viewInsets exceed the viewPadding, like when a software keyboard is shown below, padding goes to zero rather than a negative value. Therefore, padding is calculated by taking max(0.0, viewPadding - viewInsets).

viewPadding define portions of the screen that are partially obscured by the System UI or some physical features, like a camera notch, cut-out, Dynamic Island, and what not. This is an inner padding of your available Flutter view that you should use to display content that should accept gestures and not be obstructed by anything.

But there are some cases when you want to draw even in those viewInsets. For example to draw some background for your UI or to show a full-screen media edge-to-edge.

viewInsets indicates what area of edges of the screen is completely obscured. The most common example of such obstruction is a shown system keyboard.

padding is a convenient mix of those two. It gives you the padding needed to display content that is not obstructed both by the System UI and physical features as well as the system keyboard.

Below is a Flutter app I created to show those different paddings on different devices. iPhone 13 has a physical notch at the top and a navigation notch at the bottom, iPhone SE has a clear rectangle screen, while Pixel also has a clear rectangle screen, but with either a bottom navigation bar or a bottom navigation notch.

As you can see, iPhone with notches in horizontal orientation also has a viewPadding on the side where there is no obstruction. This is probably so that the application’s UI contents are still centered on the screen.

If you’re on Android and are using below code snippet for Splash Screens, then your bottom viewInsets will have the bottom navigation bar included. This can sometimes be problematic if you didn’t pay attention to putting SafeArea in every needed place, so it’s worth thinking of this single line of code before starting the development.

WindowCompat.setDecorFitsSystemWindows(getWindow(), false)

When we open a system keyboard, the viewInsets (and padding) changes. The viewInsets now describe the space taken by the system keyboard. The padding also updated to explain how much space above the insets should be offset for a safe area.

All of this should be considered while developing screens for a wide range of devices. Using those values instead of hardcoded ones will help you ensure that your application’s content always displays where it should, no matter the different shenanigans that the phone producers may come up with.

The easiest way to easily use those values is to use the SafeArea widget, which applies the padding down the widget tree and removes it from the MediaQuery (using MediaQuery.removePadding) so that you won’t have to worry about redundantly nested paddings.

The concept of view padding is something that your designers should also be familiar with, so that when they design screen mockups, the various app bars, bottom navigations, and other fancy pieces of UI near-screen-edges will be prepared in such a way that is both adaptable on those different devices’ features and easily implementable by the developer with the certainty that this is what designer had in mind.

For further knowledge refer to:

Here’s the code for ultra-simple app used in screenshots: https://gist.github.com/Albert221/3493b53a2fabf9e4cabd79f92a44eabd

Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm

What are MediaQuery’s padding, viewPadding and viewInsets?

Written by Albert Wolszon