Home > Enterprise >  Flutter I have a couple of questions about the keyboard
Flutter I have a couple of questions about the keyboard

Time:07-20

Several keyboard issues.

  1. When the application starts, the keyboard opens only after clicking on the TextFormField. There is no such problem if you go to this form, and set the start page to an empty page.
  2. When minimizing the application and opening it, the keyboard closes automatically after a second, although the focus on the TextFormField remains.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';

class Auth extends StatefulWidget {
  const Auth({super.key});
  @override
  AuthState createState() => AuthState();
}

class AuthState extends State<Auth> {

  static FocusNode focusNode = FocusNode();
  static TextEditingController controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      //FocusScope.of(context).requestFocus(focusNode);
      focusNode.requestFocus();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
          statusBarBrightness: Brightness.light, // For iOS (dark icons)
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),

      body: Padding(
        padding: const EdgeInsets.all(50.0),
        child: Center(
            child: Column(
          children: <Widget>[
            const SizedBox(height: 100.0),
            const Text(
              'Добро пожаловать',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8.0),
            Container(
              //color: Colors.indigo,
              constraints: const BoxConstraints(maxWidth: 200),
              child: const Text(
                'Для входа укажите свой номер телефона',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16.0, color: Colors.grey),
              ),
            ),
            const SizedBox(height: 24.0),
            TextFormField(
              inputFormatters: [
                MaskTextInputFormatter(mask: ' # (###) ###-##-##')
              ],
              //focusNode: focusNode,
              //controller: controller,
              autofocus: true,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Телефон',
              ),
            ),
            const SizedBox(height: 24.0),
            ElevatedButton(

              onPressed: () {
                focusNode.nextFocus();
              },
              child: Text('Продолжить', style: TextStyle(fontSize: 16.0)),
            ),
          ],
        )),
      ),
    );
  }

  @override
  void dispose() {
    focusNode.dispose();
    controller.dispose();
    super.dispose();
  }
}

CodePudding user response:

As the auto focus is true in your code, you can call this method in the initState() SystemChannels.textInput.invokeMethod('TextInput.show'); to show the keyboard whenever the app will unminimize the keyboard will appear

CodePudding user response:

You just need to unfocus or change the focus to the new focusnode on the dispose() function.

Also wrap your scaffold with gesturedetector and and the ontap function for unfocus

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';

class Auth extends StatefulWidget {
  const Auth({super.key});
  @override
  AuthState createState() => AuthState();
}

class AuthState extends State<Auth> {

  static FocusNode focusNode = FocusNode();
  static TextEditingController controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      //FocusScope.of(context).requestFocus(focusNode);
      focusNode.requestFocus();
    });
  }
  @override
  void dispose() {
    super.dispose();
    focusNode.dispose();
    controller.dispose();
    FocusScope.of(context).requestFocus(new FocusNode());
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: Scaffold(
        appBar: AppBar(
          systemOverlayStyle: const SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
            statusBarBrightness: Brightness.light, // For iOS (dark icons)
          ),
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: Padding(
          padding: const EdgeInsets.all(50.0),
          child: Center(
              child: Column(
            children: <Widget>[
              const SizedBox(height: 100.0),
              const Text(
                'Добро пожаловать',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 8.0),
              Container(
                //color: Colors.indigo,
                constraints: const BoxConstraints(maxWidth: 200),
                child: const Text(
                  'Для входа укажите свой номер телефона',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 16.0, color: Colors.grey),
                ),
              ),
              const SizedBox(height: 24.0),
              TextFormField(
                inputFormatters: [
                  MaskTextInputFormatter(mask: ' # (###) ###-##-##')
                ],
                //focusNode: focusNode,
                //controller: controller,
                autofocus: true,
                keyboardType: TextInputType.number,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Телефон',
                ),
              ),
              const SizedBox(height: 24.0),
              ElevatedButton(

                onPressed: () {
                  focusNode.nextFocus();
                },
                child: Text('Продолжить', style: TextStyle(fontSize: 16.0)),
              ),
            ],
          )),
        ),
      ),
    );
  }
}
  • Related