How to Keep a Bottom Button Sticky While TextFields Scroll Above the Keyboard in Flutter

How to Keep a Bottom Button Sticky While TextFields Scroll Above the Keyboard in Flutter

In this tutorial, we’ll build a Flutter app with a sticky bottom button and multiple TextField widgets. When the keyboard appears, the TextField in focus will automatically scroll to stay above the keyboard. This is achieved using the scrollPadding property of TextField.

Key Features

1. scrollPadding Property: The scrollPadding property ensures that the TextField scrolls above the keyboard when it appears.

TextField(
  scrollPadding: EdgeInsets.only(bottom: keyboardHeight),
  decoration: InputDecoration(
    labelText: 'Text Field $i',
  ),
)

2. Sticky Bottom Button: The bottom button remains fixed at the bottom of the screen using a Positioned widget within a Stack.

Positioned(
  bottom: 0,
  left: 0,
  right: 0,
  child: SafeArea(
    bottom: false,
    child: Container(
      color: Colors.blue,
      height: bottomHeight,
      padding: const EdgeInsets.all(16.0),
      child: const Center(
        child: Text(
          'Bottom Container',
          style: TextStyle(color: Colors.white),
        ),
      ),
    ),
  ),
)

3. Adjusting for Keyboard Height: The app dynamically adjusts for the keyboard height using MediaQuery.of(context).viewInsets.bottom.