How to avoid full page reloading when keyboard pops up?

Question

Check out this video for problem demo https://youtu.be/GsdWcTEbUbg

As there is a large number of code, I will try to summarize the structure of the code here. In a nutshell:

Scaffold(
  appBar: AppBar(),
  body: StreamBuilder<dynamic>(
    stream: globals.chatRoomBloc.threadScreen,
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      return Column(
        crossAxisAlignment:
            CrossAxisAlignment.stretch, // sticks to the keyboard
        children: <Widget>[
          Expanded(
            child: Scrollbar(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: list.length,
                itemBuilder: (BuildContext context, int index) {
                  return TileWidget();
                },
              ),
            ),
          ),
        ],
      );
    },
  ),
)

TileWidget is stateful, appends the TextField and resize the widget when the reply button is pressed. Then when the user clicks on the Textfield, the keyboard pops up.

Now my problem is that the screen is reloaded when the keyboard pops up.

I tried the following solutions:

1. Using TextField inside a Streambuilder : I am setting up the stream only once, that is when the page is loaded the first time. Any changes to the stream is made when a new chat or entry is added. In my case, this does not happen.
2. Flutter Switching to Tab Reloads Widgets and runs FutureBuilder I am not sure if this is the same problem, but the solution does not change anything for me.
3. Issue #11895 - I went through this as well, but is not helping.

I think the screen is trying to resize and redraw to accommodate the keyboard drawer. But it is for some reason failing to do that and loading everything over again. Am I missing something ? Is there a way around this ?

Answer 1

As one of the links you provides points out your buildmethod fires whenever the state of the app changes i.e the keyboard pops up, so move the streambuilder outside of it. There are a few more changes you could do. Try the following,

create a variable outside of the build method.

var myStreamBuilder;
//....
//inside initialstate method
     myStreamBuilder = StreamBuilder<dynamic>(
            stream: globals.chatRoomBloc.threadScreen,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              return Column(
                crossAxisAlignment:
                    CrossAxisAlignment.stretch, // sticks to the keyboard
                children: <Widget>[
                  Expanded(
                    child: Scrollbar(
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: list.length,
                        itemBuilder: (BuildContext context, int index) {
                          return TileWidget();
                        },
                      ),
                    ),
                  ),
                ],
              );
            },
          ),

Then in your build method call the variable.

Scaffold(
  appBar: AppBar(),
  resizeToAvoidBottomInset: false, //don't forget this!
  body: myStreamBuilder
)

EDIT: Make sure you check your snapshot that it hasData or not. If there is no data then something should be returned until it does have data, this way the user is informed what the app is doing.

Also this property might also be helpful to you. resizeToAvoidBottomInset - https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomInset.html