Search code examples
androidiosflutter

Flutter - Keyboard not showing when TextFormField is selected


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:

A screenshot of the app running on an iPhone 11. The keyboard does not show even when a TextFormWidget is selected.

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


Solution

  • 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 :)

    enter image description here

    enter image description here