CODEWITHSUNDEEP
androidiosflutter
Jordan Gillard
Jordan Gillard

Reputation: 539

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

Upvotes: 17

Views: 25223

Answers (8)

Priyanshi Pandya
Priyanshi Pandya

Reputation: 47

Make sure your readOnly property is set to true in TextFormField.

Upvotes: 0

KiriLL Sabko
KiriLL Sabko

Reputation: 358

In my case, I had a CustomTextField where I had set the default value of "keyboardType" to TextInputType.none, and was wondering why it doesn't work. :)

Upvotes: 2

HimanshuGoyal
HimanshuGoyal

Reputation: 139

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;
                    }, 
                  ),
              ),
            ],
          ),
        ),

Upvotes: 1

zilliw86
zilliw86

Reputation: 1

In my case, you have to add in your scaffold "resizeToAvoidBottomInset"

Scaffold(
        resizeToAvoidBottomInset: true,
        body: ....

Upvotes: 0

Andre Pena
Andre Pena

Reputation: 59446

In my case, I had to click I/O -> Keyboard -> Toggle Software Keyboard

enter image description here

Upvotes: 0

Luke Morse
Luke Morse

Reputation: 509

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

Upvotes: 9

javy_liu
javy_liu

Reputation: 31

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

Upvotes: 2

timilehinjegede
timilehinjegede

Reputation: 14053

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

Upvotes: 22

Related Questions