Keyboard hides TextField - Flutter

Question

I've made a chat page that contains the header, a MessagesStream and a Row that includes the TextField and RaisedButton. I've checked every single page there is about this issue, both in GitHub and StackOverflow, but I wasn't able to find any solution. The row does not go up when the keyboard is launched, instead it goes over the bottom part of the screen, hiding everything.

Could anyone please help me figure this out? I've literally tried everything.

This is my Scaffold:

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        backgroundColor: Colors.lightGreenAccent,
        appBar: new AppBar(
          backgroundColor: Colors.lightGreenAccent,
          elevation: 0,
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios, color: Colors.white),
            onPressed: () => Navigator.of(context).pop(),
          ),
          centerTitle: true,
          title: Image(
            image: iconApp,
            height: 50,
            width: 50,
          ),
        ),
        body: SafeArea(
          child: Column(
            children: <Widget>[
              SizedBox(height: 10),
              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
                        topRight: Radius.circular(30.0)),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Material(
                        borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
                        topRight: Radius.circular(30.0)),
                        color: grayWhite,
                        elevation: 2,
                        child: Padding(
                          padding: const EdgeInsets.only(bottom:10),
                          child: Row(
                            children: <Widget>[
                              Padding(
                                padding: const EdgeInsets.only(top: 10.0, left: 15),
                                child: CircleAvatar(
                                  child: Image.network(
                                  ),
                                ),
                              ),
                              Container(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Padding(
                                      padding: const EdgeInsets.only(top: 10, left: 15),
                                      child: Text(
                                        "Test",
                                        style: TextStyle(
                                            color: Colors.black54,
                                            fontSize: 20
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(top: 3, left: 15),
                                      child: Text(
                                       "Test2",
                                        style: TextStyle(
                                            color: Colors.black54,
                                            fontSize: 15
                                        ),
                                      ),
                                    ),
                                    Container(
                                      height: 1,
                                      color: Colors.white70,
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                      MensagensStream(),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: TextField(
                                controller: textEditingController,
                                autofocus: true,
                                autocorrect: true,
                                onChanged: (value) {
                                  mensagem = value;
                                },
                                decoration: InputDecoration(
                                    border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(30.0),
                                    ),
                                    hintText: "Digite a sua mensagem..."
                                ),
                              ),
                            ),
                          ),
                          ButtonTheme(
                            height: 55,
                            minWidth: 10,
                            child: RaisedButton(
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(
                                    100,
                                  )
                              ),
                              color: Colors.lightGreenAccent,
                              child: Icon(Icons.send, color: Colors.white),
                              onPressed: () => {
                                textEditingController.clear(),
                                firestore.collection('mensagens').add({
                                  'Mensagem': mensagem,
                                  'Remetente': googleEmail,
                                  'Destinatario': "patio@teste.com",
                                  'DataHorario': FieldValue.serverTimestamp(),
                                })
                              },
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}```

Answer 1

You can use a Scaffold and place the text field as bottomSheet

Answer 2

Wrap either one of you Columns (probably the outer one) with a SingleChildScrollView. The issue is that simply popping up the keyboard doesn't suddenly tell the layout that it needs to be able to scroll. You have explicitly say you want it to be able to scroll.

See this for more information on the SingleChildScrollView.