When I select a Textfield the keyboard moves over it

Question

When i select a Textfield, the keyboard is going to be shown but the keyboard hide my selected TextField. Does someone have a solution?

Answer 1

A pretty short way to realize this is by simply using a MediaQuery for getting the bottom view insets. This would look as follows:

...
return Row(
  children: <Widget>[
    TextField(
      decoration: InputDecoration.collapsed(hintText: "Start typing ..."),
      controller: _chatController,
    ),
    SizedBox(
      height: MediaQuery.of(Context).viewInsets.bottom,
    ),
  ],
);
...

Hope it helps!

Answer 2

My way here

Scaffold(
    resizeToAvoidBottomInset: false,
    resizeToAvoidBottomPadding: false,
    body: Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('images/Bg img.png'), fit: BoxFit.fill)),
      child: Padding(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom),
        child: CustomScrollView(
          slivers: [
            SliverFillRemaining(
              hasScrollBody: false,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                .............

This template has some advantages:

• Move content up when the keyboard appears
• Column using spaceBetween inside a scroll view
• Background is sticked phone scren and never change event the keyboard ups

Answer 3

Just cut and paste your body code in this -

SingleChildScrollView(
            child: Stack(
              children: <Widget>[
                  // your body code 
               ],
             ),
           ),

Answer 4

In my case I had to combine answer given by @Javid Noutash which uses AnimationController along with scrollPadding property of TextFormField. code:

Add this line in build method

double bottomInsets = MediaQuery.of(context).viewInsets.bottom;

Add scrollPadding property

return ListView(
children:[

...widgets,
Container(
margin:EdgeInsets.only(
   top:1.0,
   left:1.0,
   right:1.0,
   bottom:_focusNode.hasFocus && bottomInsets != 0?
          _animation.value : 1.0),
child:TextFormField(
   decoration: InputDecoration(
                  labelText: 'I move!',
               ),
   focusNode: _focusNode,
   scrollPadding: EdgeInsets.only(bottom:bottomInsets + 40.0),
  ),
 ),
]
);

Note: Combine the this code with @Javid Noutash's code