What are MediaQuery’s padding, viewPadding and viewInsets?
This article aims to help you better understand what are Flutter’s
Let’s start with an excerpt from the
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.
When we open a system keyboard, the
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.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:
- MediaQueryData API
- MediaQueryData.viewPadding API
- MediaQueryData.viewInsets API
- MediaQueryData.padding API
- SafeArea API
- SafeArea (Flutter Widget of the Week)
- Padding, ViewPadding, and ViewInsets, Oh My! | Decoding Flutter
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