Как отключить клавиатуру в TextFormfeild flutter 2.0.1

Эй, как мне закрыть здесь клавиатуру? Я хочу, чтобы клавиатура отключалась при касании за пределами области.

        Widget build(BuildContext context) {
return Padding(
  padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
  child: TextFormField(
    keyboardType: TextInputType.number,
    maxLength: 10,
    controller: widget._phoneController,
    onTap: () => FocusScope.of(context).unfocus(),
    inputFormatters: [
      //input type
      FilteringTextInputFormatter.allow(
        RegExp(r'[0-9]'),
      ),
    ],
    //how the text box is decorated
    decoration: buildInputDecoration(
        Icons.phone, 'Enter your 10 digit phone number'),
  ),
);
}

3 ответа

Вы можете обернуть родительский виджет, занимающий весь экран, виджетом, который может обнаруживать клики. В ,

      FocusScope.of(context).unfocus()

FocusScope.of(context) получает текущий сфокусированный узел и .unfocus() расфокусирует это.

Это работает, потому что когда TextFormFieldнажимается, он потребляет щелчок. Таким образом, родительский виджет не запускается. Так что расфокусировки не происходит.

Когда мы щелкаем снаружи, родительский виджет потребляет событие щелчка, потому что ни один из его дочерних виджетов не потребляет его. Таким образом, родительский onClick срабатывает.

Ниже приведен пример. Вы можете увидеть демонстрацию на DartPad .
(Хотя лучше всего запустить его на мобильном устройстве, чтобы видеть экранную клавиатуру.)

      class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hide keyboard in TextFormField when touched outside'),
      ),
      body: GestureDetector(
        onTap: () {
          print('Clicked outside');
          FocusScope.of(context).unfocus();
        },
        child: Container(
          color: Colors.white,
          child: Form(
            child: Column(
              children: [
                TextFormField(
                  onTap: () => print('Clicked TextFormField'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Работал для меня :)

        TextField(
        onSubmitted: (value) async {
          FocusScope.of(context).unfocus();
        },
    })
Другие вопросы по тегам