How to detect if iOS or Android device has HomeBar at the bottom of device in flutter

Question

Device with HomeBar need some spacing on the bottom of the page. So, we need to check if device has homebar so that we can give the padding accordingly.

How to know if device has HomeBar in flutter?

Answer 1

You can use MediaQuery.of(context).padding.bottom and perform a certain action if it is non-zero. For example

if (MediaQuery.of(context).padding.bottom > 0) {
  // homebar is present
} else {
  // homebar is not present
}

Or you can use MediaQuery.of(context).viewInsets.bottom. Both MediaQuery.of(context).padding.bottom and MediaQuery.of(context).viewInsets.bottom will give you the same result, but using viewInsets.bottom is more accurate since it takes into account any system UI elements that may be present, such as the keyboard, not just the home bar.

Answer 2

You can use the SafeArea widget to easily wrap your content and avoid the bottom insets.

To actually get the size, you can use MediaQuery.of(context).viewInsets and check its bottom insets. (You do not need to do this, if you just want to add padding. Use SafeArea like I mentioned above.)

Answer 3

SafeArea()

A widget that insets its child by sufficient padding to avoid intrusions by the operating system.

For example, this will indent the child by enough to avoid the status bar at the top of the screen.

It will also indent the child by the amount necessary to avoid The Notch on the iPhone X, or other similar creative physical features of the display.

When a minimum padding is specified, the greater of the minimum padding or the safe area padding will be applied.