Rebuild whole widget tree when a keyboard appears

Question

How to resolve re-render the whole widget tree when keyboard appears in flutter? In my app, whenever keyboard appears and disappears, the whole widget tree will be re build? What is the solution to avoid this?

Answer 1

There are multiple ways to handle this, here are some solutions I've used in the past.

Scaffold's resizeToAvoidBottomInset parameter

Set this to false and your screen will not resize, the downside of this is that the keyboard will appear on top of your UI

Example:

class SampleScreen extends StatelessWidget {
  const SampleScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Align(
        alignment: Alignment.bottomCenter,
        child: SafeArea(
          minimum: const EdgeInsets.all(20),
          child: TextField(
            decoration: new InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.black, width: 1.0),
              ),
              hintText: 'Mobile Number',
            ),
          ),
        ),
      ),
    );
  }
}

Wrap your Scaffold's body in a ScrollView

By placing your whole body inside a ScrollView you may now have a lengthy form, only caveat here is that you will not be able to use Spacer and Expanded widgets

Example

class SampleScreen extends StatelessWidget {
  const SampleScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        minimum: const EdgeInsets.all(20),
        child: SingleChildScrollView(
          child: Column(children: [
            Container(
              padding: EdgeInsets.all(20),
              margin: EdgeInsets.all(10),
              color: Colors.red,
              height: MediaQuery.of(context).size.height - 165,
            ),
            TextField(
              decoration: new InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.black, width: 1.0),
                ),
                hintText: 'Mobile Number',
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

Save your current State

Use a stateful widget and save your app's current data somewhere.