Flutter: A not so simple login form - Keyboard adaptive layout with RenderShiftedBox

Short summary

A deep technical walkthrough of solving a deceptively hard Flutter problem: keeping a bottom-pinned CTA button visible when the keyboard opens on a login screen. The author traces through multiple failed approaches—resizeToAvoidBottomInset, AnimatedSize, Align—before arriving at a custom RenderShiftedBox solution that reads keyboard insets via didChangeMetrics. The article is notable for explaining why each obvious fix fails and what it reveals about Flutter's layout pipeline.

• •resizeToAvoidBottomInset shrinks viewport but doesn't shorten content, pushing CTAs off-screen
• •Solution: read viewInsets.bottom in didChangeMetrics, pad body, shrink hero via RenderShiftedBox
• •Each failed approach teaches a fundamental lesson about Flutter's layout system

Generated with AI, which can make mistakes.