Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

dart

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',
                ),
              ),             
            ],
          )          
        ]
      )
    );
  }
}
like image 567
rafaelcb21 Avatar asked Aug 29 '17 01:08

rafaelcb21


People also ask

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

TextField is a very common widget in Flutter. When you click on the TextField it opens up the on-screen keyboard. To hide/dismiss the keyboard you have to press the back button in Android and the done button (inside the onscreen keyboard) in iOS.

Why flutter UI lag while soft keyboard appearing and disappearing?

The reason of this so called Glitch is that the default behaviour of the flutter scaffold widget is to resize it's body when soft keyboard opens up or closes down. While the flutter scaffold is notified of any of the above two events, it will start resizing the widgets under its body to match the new state.


1 Answers

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>();
like image 79
Andrey Turkovsky Avatar answered Sep 30 '22 16:09

Andrey Turkovsky