Flutter - Keyboard not showing when TextFormField is selected

Question

I am currently experiencing an issue where the keyboard does not appear when I select any TextFormField widgets inside of a Form widget. This is the code for the form, which is inside of my CreateAccountForm Stateful widget.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sign_up_page/constants.dart';

class CreateAccountForm extends StatefulWidget {
  @override
  _CreateAccountFormState createState() => _CreateAccountFormState();
}

class _CreateAccountFormState extends State<CreateAccountForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          CustomTextFormField(
            labelText: "Email",
            keyboardType: TextInputType.emailAddress,
          ),
          Spacer(),
          CustomTextFormField(labelText: "Full name"),
          Spacer(),
          CustomTextFormField(
            labelText: "Password",
            isPassword: true,
          ),
          Spacer(),
          RaisedButton(
            onPressed: () {
              print("Get started button pressed");
            },
            padding: EdgeInsets.all(20.0),
            color: blueMaterialColor.shade100,
            shape: defaultRectangularButtonShape,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Get started",
                  style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.white,
                  ),
                ),
                Icon(
                  Icons.arrow_forward,
                  color: Colors.white,
                ),
              ],
            ),
          ),
          Spacer(),
        ],
      ),
    );
  }
}

class CustomTextFormField extends StatefulWidget {
  CustomTextFormField({
    @required this.labelText,
    this.isPassword = false,
    this.keyboardType = TextInputType.text,
  });

  final String labelText;
  final bool isPassword;
  final TextInputType keyboardType;

  @override
  _CustomTextFormFieldState createState() => _CustomTextFormFieldState();
}

class _CustomTextFormFieldState extends State<CustomTextFormField> {
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
          labelText: widget.labelText, labelStyle: inputLabelStyleUnselected),
      style: inputTextStyle,
      obscureText: widget.isPassword,
      keyboardType: widget.keyboardType,
    );
  }
}

This is a screenshot, which shows the cursor inside of the email TextFormWidget , but without the keyboard showing up:

You can view all of the code for the project on my Github branch here: https://github.com/Jordan-Gillard/sign_up_page/tree/bug/fixing_keyboard_not_showing

Answer 1

If you are running on a Simulator , your Simulator definitely has the Connect Hardware Keyboard enabled. You can fix the issue by disabling the feature.

I provided images to guide on how to do that below:

1. Select your simulator and click on the Hardware tab.
2. On the Hardware tab, select the Keyboard option.
3. Uncheck the Connect Keyboard Hardware option to enabling toggling an actual keyboard on the Simulator

Check the Images provided below for more visual description:)

Answer 2

If you use ios simulator, the menu tab is I/O. enter image description here

Answer 3

In my case, I had called enableFlutterDriverExtension() in main.dart. Removing this fixed the isssue.

Answer 4

the solution is simple

1. wrap your textFields and buttons in a separate column widget
2. then wrap that column with Form() and give formKey

eg.

 Form(
            key: _formKey,
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 21),
                  child: TextFormField(
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '';
                      }
                      return null;
                    },