3.4 C
New York
Wednesday, February 1, 2023

Flutter: Prevent Soft Keyboard from covering TextField

To prevent the soft keyboard from covering your TextField while the user is typing, you can wrap your main widget with SingleChildScrollView.

Example

Before using SingleChildScrollView:Advertisements

Column(children: [
          Container(
            width: double.infinity,
            height: 700,
            color: Colors.orange,
          ),
          TextField(
            decoration: InputDecoration(labelText: "Type something"),
          )
        ])

After using SingleChildScrollView:

SingleChildScrollView(
          child: Column(children: [
            Container(
              width: double.infinity,
              height: 700,
              color: Colors.orange,
            ),
            const TextField(
              decoration: InputDecoration(labelText: "Type something"),
            )
          ]),
)

In case you place some text fields inside a bottom sheet and want to avoid the soft keyboard overlapping the text fields, see this example: Modal Bottom Sheet with TextFields inside.

If you would like to learn more about Flutter, check out our Flutter topic page or Dart topic page for the latest tutorials and examples.

Advertisements

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles