CODEWITHSUNDEEP
dartflutter
rafaelcb21
rafaelcb21

Reputation: 13304

Flutter - Keyboard does not appear and does not stay under the chosen field

Keyboard is not working properly with TextField.

The code below I put 14 TextField, but when clicking for example in field 14 the keyboard does not appear and it is not below the TextField tapped.

Could you help me with this keyboard problem not showing up and not getting me under the chosen field to be?

enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new HomePage()));
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {
  final TextEditingController _controller = new TextEditingController();

  @override
  Widget build(BuildContext context) {    
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new ListView(
            shrinkWrap: true,
            children: <Widget>[
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 1',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 2',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 3',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 4',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 5',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 6',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 7',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 8',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 9',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 10',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 11',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 12',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 13',
                ),
              ),
              new TextField(
                controller: _controller,
                decoration: new InputDecoration(
                  hintText: 'Type something 14',
                ),
              ),             
            ],
          )          
        ]
      )
    );
  }
}

Upvotes: 9

Views: 15931

Answers (7)

Pipo Design
Pipo Design

Reputation: 43

Have a look at the key of the form. In my case, I was experimenting this issue because I had a deprecated version of the form in the project structure which uses the same key. Form keys must be unique. Once I commented out the deprecated version the keyboard started working fine.

Upvotes: 0

Mehroze Zaidi
Mehroze Zaidi

Reputation: 386

To make the keyboard below to textFormFeild use attribute:
resizeToAvoidBottomInset: true , in Scaffold Widget.

Upvotes: -2

Bikey
Bikey

Reputation: 945

Move your Globalkey creation out of you build function.

GlobalKey<ScaffoldState> _profileScaffoldKey = new GlobalKey<ScaffoldState>();
@override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _profileScaffoldKey,

Upvotes: 3

Mitch
Mitch

Reputation: 1856

I experienced this issue after modifying android app level gradle file updating both my compileSdkVersion and targetSdkVersion to 28 from the default (27). Consider leaving it to the default version. I was testing on an android 9 emulator with google play store.

Upvotes: 1

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

I had the same problem, but in my case it was in Key object

await showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) {
      final _textKey = GlobalKey<FormState>();
      TextEditingController controller = TextEditingController();

      return AlertDialog(
        title: Text('Load conference'),
        content: Form(
          key: _textKey,
          child: TextFormField(
            controller: controller,
            validator: (str) {
              if (str.isEmpty) {
                return 'Empty url';
              } else if (str.length >= 4 && str.substring(0, 4).toLowerCase() != 'http') {
                return 'Url has to start from \'http\'';
              }
            },
          ),
          onChanged: () {
            if (controller.text.isNotEmpty) {
              _textKey.currentState.validate();
            }
          },
        ),

Problem was solved by making key static class field

static final _textKey = GlobalKey<FormState>();

Upvotes: 17

Collin Jackson
Collin Jackson

Reputation: 116728

You should not have all your text fields sharing the same TextEditingController. Use a separate controller for each one.

Upvotes: 8

icazevedo
icazevedo

Reputation: 612

I couldn't reproduce the error, everything seems to work fine. Check if your Flutter SDK is updated (run flutter doctor). Have you tried to change the target platform to IOS to see if the error persists?

Upvotes: 0

Related Questions