Flutter Question posted in
The official Flutter documentation can be found here.

How to raise the screen when the keyboard is activated in flutter

When the keyboard is activated, I want to raise the entire screen as much as the keyboard is raised. And if it is deactivated again, it should return to its original state.

I tried

  • resizeToAvoidBottomInset of scaffold
  • SingleChildScrollView + reverse: true (problem with this method is that the list appears backwards)

ex)

Scaffold( 
... 
resizeToAvoidBottomInset: true, 
body: CustomRefreshIndicator( 
child: ListView( 
...
Tags:

2

Answers


  1. 0

    Adding MediaQuery.of(context).viewInsets in Padding should do the trick

    Padding(padding:MediaQuery.of(context).viewInsets, child: //Your Widget);
    Login or Signup to reply.
  2. 0

    You can wrap your entire screen or the portion you want to be raised, with the viewInset’s bottom padding. you can get it’s value from MediaQuery.viewPaddingOf(context).bottom

    Scaffold(
  body: SafeArea(
    child: Padding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.viewPaddingOf(context).bottom,
      ),
      child: ...,
    ),
  ),
);

    With this, I wrapped the body of the scaffold, because I don’t want to raise the entire scaffold, just it’s contents, and only to the bottom, so that it only lifts the screen’s bottom, you can go ahead and use other values for the other parts of the padding, like left, top, right

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search