When the keyboard is open, the content of the column on the real device looks like on the picture, i.e. it seems that the column does not take into account the fact that the keyboard is open in order to center the content in the free area. Instead, the column keeps centering at the height of the screen. How to make the distances y1==y2 when the keyboard is open?

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextField(
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  labelText: 'Input box for keyboard test',
                ),
                autofocus: true,
                focusNode: _textFieldFocus, //dont fet this parameter
                onSubmitted: (value) {
                  // print("$value");
                  FocusScope.of(context).requestFocus(_textFieldFocus);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

When the keyboard is open, the content of the column on the real device looks like on the picture, i.e. it seems that the column does not take into account the fact that the keyboard is open in order to center the content in the free area. Instead, the column keeps centering at the height of the screen. How to make the distances y1==y2 when the keyboard is open?

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextField(
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  labelText: 'Input box for keyboard test',
                ),
                autofocus: true,
                focusNode: _textFieldFocus, //dont fet this parameter
                onSubmitted: (value) {
                  // print("$value");
                  FocusScope.of(context).requestFocus(_textFieldFocus);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

• flutter

• you can try MediaQuery.viewInsetsOf for padding, btw is nox better than android emulator(performance)? – Md. Yeasin Sheikh Commented Feb 10 at 16:21
• @Md.YeasinSheikh I find the performance of Nox to be better. – rozerro Commented Feb 10 at 16:35

1 Answer 1

You can put a TextField Widget between an Expanded widget to take the max height from the top and the max height from the bottom after giving the TextField widget the height it needs

By placing a TextField widget between two Expanded widgets inside a Column, you ensure that the TextField is centered vertically while taking up the necessary height. The Expanded widgets above and below the TextField will occupy the remaining available space, effectively pushing the TextField to the center of the screen.

Also make sure to put resizeToAvoidBottomInset, as true => resizeToAvoidBottomInset: true,

So that it will make sure to substract the keyboard height from the screen height

Like this :

   Scaffold(
      appBar: AppBar(
        title: const Text("Center Content"),
        backgroundColor: Colors.green,
      ),
      resizeToAvoidBottomInset: true,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const Expanded(          <------ Take the max height from the top
                child: SizedBox(),
              ),
              TextField(
                keyboardType: TextInputType.number,
                decoration: const InputDecoration(
                  labelText: 'Input box for keyboard test',
                ),
                autofocus: true,
                focusNode: _textFieldFocus, //dont fet this parameter
                onSubmitted: (value) {
                  // print("$value");
                  FocusScope.of(context).requestFocus(_textFieldFocus);
                },
              ),
              const Expanded(         <------ Take the max height from the bottom
                child: SizedBox(),
              ),
            ],
          ),
        ),
      ),
    );