TextFormField hidden by keyboard - Flutter

Question

When focussing on the TextFormField, the keyboard hides over the TextFormField. I am using SingleScrollview with the Column widget. Below I attached a screenshot with coding. Please guide me in fixing this issue.

Scaffold(
  resizeToAvoidBottomInset: false,
  resizeToAvoidBottomPadding: false,
  key: _scaffoldKey,
  body: SingleChildScrollView(
  child: Padding(
    padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
    child: new Column(
      children: <Widget>[
        _tabText(),
        isSignin ? _loginContainer() : _signUpContainer(),
      ],
    ),),),);

What do you want when enter email field that time also visible password field above keyboard? — Arti, Jan 11 '20 at 11:51

score 3 · Accepted Answer · answered Feb 17 '20 at 10:14

//Add this line "resizeToAvoidBottomInset: true," to your Scaffold and put your main container in ScrollView.

    @override
    Widget build(BuildContext context) {
   return Scaffold(
   resizeToAvoidBottomInset: true,
   key: _scaffoldKey,
   backgroundColor: Colors.white,
   body: SingleChildScrollView(    
      child: Container()
    ),
   );
  }

score 0 · Answer 2 · answered Jan 11 '20 at 13:04

0

You have to remove these properties of the Scaffold:

  resizeToAvoidBottomInset: false,
  resizeToAvoidBottomPadding: false,

If you remove them, resizeToAvoidBottomInset will be true by default.

resizeToAvoidBottomInset property:

...if there is an onscreen keyboard displayed above the scaffold, the body can be resized to avoid overlapping the keyboard, which prevents widgets inside the body from being obscured by the keyboard.

answered Jan 11 '20 at 13:04

Pablo Barrera

10,387
3
28
49

Thanks for your reply. I tried the above solution but I got the same. – VigneshK Jan 13 '20 at 06:52
If you tap on the password field, the keyboard is over the password field? – Pablo Barrera Jan 13 '20 at 09:04

score 0 · Answer 3 · answered Jan 12 '20 at 06:23

0

Try SingleChildScrollView() widget after scaffold() widget. wrap all widgets with SingleChildScrollView() widget after Scaffold() widget.

Widget build(BuildContext context) {
return Scaffold( 
  body: SingleChildScrollView(
    child: Form(
      key: formKey,
      child: Column(
        children: <Widget>[
          Container(
            child: Stack(
              children: <Widget>[
                Container(

answered Jan 12 '20 at 06:23

ahmed minhaj

339
1
3
15

Thanks for your reply. Already I declared all widgets inside the SingleChildScrollView. – VigneshK Jan 13 '20 at 06:51

score 0 · Answer 4 · answered Nov 02 '20 at 06:06

I tried animation to avoid this:

ScrollController _scrollController;                                 //<==  

class SignUpPage extends StatefulWidget {
  static String tag = 'SignUpPage';
  @override
  _SignUpPageState createState() => _SignUpPageState();
}

class _SignUpPageState extends State<SignUpPage> {

//Implementing scrollController by detecting keyboard               //<==
  bool scrolled = false;
  _scrollListener() {
    if (!scrolled && MediaQuery.of(context).viewInsets.bottom != 0) {
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: Duration(milliseconds: 100),
        curve: Curves.easeOut,
      );
      scrolled = true;
    }
    if (MediaQuery.of(context).viewInsets.bottom == 0) {
      scrolled = false;
    }
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    super.initState();
  }

TextFormField hidden by keyboard - Flutter

4 Answers4

Linked