What is resizeToAvoidBottomInset? When should we use it?

Overview

resizeToAvoidBottomInset

Scaffold

true

How It Works

textCopy
Without keyboard:
┌──────────────────┐
│ AppBar           │
│                  │
│   Body Content   │
│                  │
│ TextField  ←─────┼── cursor here
└──────────────────┘

When keyboard opens (resizeToAvoidBottomInset: true):
┌──────────────────┐
│ AppBar           │
│   Body Content   │ ← body shrinks
│ TextField        │ ← stays visible
└──────────────────┘
│   KEYBOARD       │
└──────────────────┘

Default Behavior (true)

dartCopy
Scaffold(
  resizeToAvoidBottomInset: true, // Default
  body: Column(
    children: [
      Expanded(child: ListView(...)),
      TextField(decoration: InputDecoration(labelText: 'Message')),
    ],
  ),
)
// Body shrinks when keyboard appears — TextField always visible

Disabled (false)

dartCopy
Scaffold(
  resizeToAvoidBottomInset: false,
  body: Stack(
    children: [
      // Background image — should not resize
      Positioned.fill(child: Image.asset('bg.jpg', fit: BoxFit.cover)),
      // Form positioned above keyboard manually
      Positioned(
        bottom: MediaQuery.of(context).viewInsets.bottom + 16,
        left: 16, right: 16,
        child: TextField(),
      ),
    ],
  ),
)

When to Set to false

false

MediaQuery.viewInsets

Manual Keyboard Padding (when false)

dartCopy
// Manually add padding equal to keyboard height
Padding(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom,
  ),
  child: TextField(),
)

Default: Leave

textCopy

resizeToAvoidBottomInset: true

for most screens. Set it to

textCopy

false

when you have full-screen backgrounds or need custom keyboard handling with a

textCopy

Stack

layout.