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()


          ],
        ),
      ),
    );
  }
}

Answer 1

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

Answer 2

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

Answer 3

1. no need to use statefull widget because the state of widget is not changing.
2. 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(),
      ),
    );
  }
}