Textfield rises above keyboard

Question

I would want the keyboard to push the textfield up so that the full textfield can be seen without the user scrolling. Tried resizeToAvoidBottomInset: true as suggested in Flutter TextFormField hidden by keyboard

However, the keyboard still hides the textfield when the textfield is in focus.

Below is my code starting from Scaffold:

Scaffold(
      resizeToAvoidBottomInset: true,
      floatingActionButton: Container(
        height: height * 0.054,
        width: width * 0.885,
        child: FloatingActionButton.extended(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(9.0))),
          isExtended: true,
          backgroundColor: Colos.blue,
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          onPressed: () {
          },
          label: Text('SEND',
              style: TextStyle(
                  color: Colors.white
                  fontWeight: FontWeight.bold,
                  letterSpacing: 2.1,
                  fontSize: 13.5)),
        ),
      ),
      extendBody: true,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: IconButton(
          icon: Icon(Icons.chevron_left,
              size: 21, color: Colors.white
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => TestingHomePage()),
            );
          },
        ),
        centerTitle: true,
        title: Text('Textfield',
            style: TextStyle(
                color: Colors.white
                fontWeight: FontWeight.bold,
                fontSize: 18)),
      ),
      backgroundColor: Colors.black,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(children: <Widget>[
            Padding(
              padding: EdgeInsets.only(top: height * 0.015),
              child: Container(
                margin: EdgeInsets.symmetric(
                  horizontal: width * 0.045,
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12)),
                  color: Colors.red,
                ),
                child: Widget
                             
brackets

            Padding(
              padding: EdgeInsets.symmetric(
                  horizontal: width * 0.06, vertical: height * 0.02),
              child: TextField(
                style: TextStyle(color: Colors.white),
                maxLines: maxLines,
                autofocus: false,
                decoration: InputDecoration(
                  decoration...
                ),
                onChanged: (text) {
                  print("First text field: $text");

              brackets

Could it be because of the floatingactionbutton docked?

The results whether true or false is the same. – VegetaSaiyan Jun 18 '21 at 08:28 — VegetaSaiyan, Jun 18 '21 at 08:28

score 1 · Accepted Answer · answered Jun 18 '21 at 08:16

The problem here is that the text field is inside the scroll view.

Follow this hierarchy:

Scaffold(
  body: SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [ ... ] // Put your scroll view elements here.
            ),
          )
        ),
        // Put your text field outside the scroll view.
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(),
        ),
      ],
    ),
  ),
);

This way, whenever the screen size changes, scroll view shrinks due to expanded widget and TextField remains fixed at bottom and moves up with the keyboard.

Also, Try setting resizeToAvoidBottomInset: false/true after making the changes to better understand what this property does.

This work Afridi, thanks. But there's one issue. The widget above the textfield actually has some guides as to how to fill in the answer. So when the container above changes shape, the guides kind of gets cut off. is there any way around that? — VegetaSaiyan, Jun 18 '21 at 08:39
It is more like a design choice. If I were to implement something similar, I would scroll the important text into the view whenever the text field gets focused. — Afridi Kayal, Jun 18 '21 at 08:46

Textfield rises above keyboard

1 Answers1