Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 736
Jordan Gillard Avatar asked Jul 10 '20 18:07

Jordan Gillard


People also ask

How do you get the keyboard to come up on Flutter?

You can use the autofocus:true property of the TextField: Whether this text field should focus itself if nothing else is already focused. So whenever the widget appears on screen, if theres nothing else with the keyboard focus, the focus will automatically be directed to it, thus opening the keyboard.


2 Answers

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

like image 144
V.N Avatar answered Sep 21 '22 22:09

V.N


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

like image 20
javy_liu Avatar answered Sep 20 '22 22:09

javy_liu