The keyboard is not coming up when I use a Form in a showModalBottomSheet or showDialog

Question

The keyboard is not coming up when I tap the TextFormField in a Form widget in a showModalBottomSheet. I tried using a showDialog but the same thing happened. When I tap on the TextFormField, the keyboard comes up and immediately goes back down, flickering. I tried setting autofocus to true for the first TextFormField and then the keyboard comes up with the ModalBottomSheet but the keyboard didn't go down when dismissed. It just flickers.

Here is a sample code that shows the error.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Screen1(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text(
          'Placeholder Text',
          style: TextStyle(fontSize: 40),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return Dialog(
                child: InputSheet(),
              );
            },
          );
          // Navigator.push(context, MaterialPageRoute(builder: (context) => InputSheet()));
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

class InputSheet extends StatelessWidget {
  InputSheet({Key? key}) : super(key: key);

  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                textAlign: TextAlign.center,
                autofocus: true,
                cursorColor: Colors.black87,
                onChanged: (newString) {
                  print('newString');
                },
              ),
              TextFormField(
                textAlign: TextAlign.center,
                cursorColor: Colors.black87,
                onChanged: (newString) {
                  print('newString');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

It's the _formKey that is causing the problem. The new solution:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Screen1(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text(
          'Placeholder Text',
          style: TextStyle(fontSize: 40),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return Dialog(
                child: InputSheet(),
              );
            },
          );
          // Navigator.push(context, MaterialPageRoute(builder: (context) => InputSheet()));
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

class InputSheet extends StatelessWidget {
  InputSheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: const EdgeInsets.fromLTRB(20, 30, 20, 20),
        child: Form(
          child: Column(
            children: [
              TextFormField(
                textAlign: TextAlign.center,
                autofocus: true,
                cursorColor: Colors.black87,
                onChanged: (newString) {
                  print('$newString');
                },
              ),
              TextFormField(
                textAlign: TextAlign.center,
                cursorColor: Colors.black87,
                onChanged: (newString) {
                  print('$newString');
                },
              ),
              Builder(
                builder: (context) {
                  return ElevatedButton(
                    onPressed: () {
                      if (Form.of(context)!.validate()) {
                        Navigator.pop(context, true);
                      }
                    },
                    child: const Text('Validate'),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

To validate the form, I use a Builder to access the context of the form. This works but I don't understand how it works. If you understand it, help me please.