Flutter TextFormField: The keyboard appeared and instantly disappeared

Question

When I click the TextFormField, the keyboard appears, then it disappears instantly, just like blinking. I wonder that whether it is because the lacking of some parameters? Or some other problems? Thanks. Here are my relative codes.

final _formKey = GlobalKey<FormState>();
String? _account;
Widget _showAccountInput() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(15.0, 10.0, 0.0, 0.0),
      child: new TextFormField(
        maxLines: 1,
        obscureText: true,
        autofocus: false,
        style: TextStyle(fontSize: 15),
        decoration: new InputDecoration(
            border: InputBorder.none,
            hintText: 'input',
            icon: new Icon(
              Icons.lock,
              color: Colors.grey,
            )),
        onSaved: (value) => _account = value?.trim(),
      ),
    );
  }
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Second Screen"),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _showAccountInput()


          ],
        ),
      ),
    );
  }
}

there is no need to change the widget in statefull widget...Textfield does not required state change...so it will run properly in stateless widget — Sumed, Feb 10 '22 at 06:22

score 1 · Answer 1 · answered Feb 07 '22 at 05:32

no need to use statefull widget because the state of widget is not changing.
the simplest way to do the example is create the textfield widget first then extract the method and make it reusable widget.


class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [ShowAccountInput()],
      ),
    );
  }
}

class ShowAccountInput extends StatelessWidget {
  String? account;

  ShowAccountInput({
    this.account,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(15.0, 10.0, 0.0, 0.0),
      child: TextFormField(
        maxLines: 1,
        obscureText: true,
        decoration: const InputDecoration(
            hintText: 'input',
            border: InputBorder.none,
            icon: Icon(
              Icons.lock,
              color: Colors.grey,
            )),
        onSaved: (value) => account = value?.trim(),
      ),
    );
  }
}

score 0 · Accepted Answer · answered Feb 07 '22 at 03:06

0

if your build method is in a StatelessWidget, try to change it to a StatefulWidget

answered Feb 07 '22 at 03:06

mohamed abu-ghazalla

80
1
8

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 07 '22 at 07:38

score 0 · Answer 3 · answered Feb 07 '22 at 03:16

I've modified a bit of your code, and the keyboard is working fine. Maybe you can give it a try or compare with your code so you find the cause. Here is the full code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String? _account;
  Widget _showAccountInput() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(15.0, 10.0, 0.0, 0.0),
      child: TextFormField(
        maxLines: 1,
        obscureText: true,
        autofocus: false,
        style: const TextStyle(fontSize: 15),
        decoration: const InputDecoration(
            border: InputBorder.none,
            hintText: 'input',
            icon: Icon(
              Icons.lock,
              color: Colors.grey,
            )),
        onSaved: (value) => _account = value?.trim(),
      ),
    );
  }

  // @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Screen"),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[_showAccountInput()],
        ),
      ),
    );
  }
}

Thanks for your help. The build method is StatelessWidget but not StatefulWidget. I changed it and it worked — yamato, Feb 07 '22 at 15:57

Flutter TextFormField: The keyboard appeared and instantly disappeared

3 Answers3