Flutter: Keyboard on above TextField issue


 

Hi there, another quick notes for my self on Flutter. Today I meet issue about Keyboard show above on Textfield which make user must scroll the view manually to make TextField visible on screen when user typing with soft keyboard on their device.

Just add this code to your textfield

scrollPadding: EdgeInsets.only(
   bottom: MediaQuery.of(context).viewInsets.bottom,
),

So your TextField should be

TextFormField(
  controller: ctrlSavingAmount,
  keyboardType: TextInputType.number,
  scrollPadding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom,
  ),
)

You can see the video before and after add that code 

Before

After

Refs: https://www.linkedin.com/pulse/move-widget-up-when-keyboard-appears-flutter-lakshydeep-vikram-sah


 

Komentar