Annoying Keyboard Overlaps: Understanding Flutter’s Padding, vs ViewPadding vs ViewInsets. Oh! My

Handling layouts when the device’s keyboard is visible has always been a challenge for me. Without careful consideration, the keyboard could obscure a significant portion of my app’s UI, leading to an unsatisfactory user experience.

A common situation might involve me filling the whole screen with a stack, giving a hero image the top 50%, a text input the bottom 10%, and maybe a scrollable list of comment that remaining 40%. Stacks are powerful, So before long, my UI would be looking good, and I’d be excited about to start testing it out.

I’d tap on the text input. And suddenly, the keyboard appears and covers half the screen, including the very text input it’s supposed to power. This is not what I wanted.

Understanding everything requires getting cozy with the MediaQuery class.