Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: Keyboard overflow with My Dialog

I'am trying to add TextField to a Dialog, but when the Keyboard appears, it gives an overflow.

My dialog Image

dialog Image

When the Keyboard shows up

When the Keyboard shows up

Here How a part my code looks Like:

AlertDialog(
    content: new ListView(
      shrinkWrap: true,
  children: <Widget>[
    Text(
      "How Would You Rate Our App?",
      style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
      textAlign: TextAlign.center,
    )
like image 365
ShrJamal Avatar asked Jul 24 '18 12:07

ShrJamal


People also ask

How do I stop my keyboard from overflowing my Flutter?

The solution to resolve this overflow error is to make your entire widget or in our case the Column scrollable. We can do that by wrapping our Column inside a SingleChildScrollView. Also, wrap the SingleChildScrollView with Center so that the entire UI is centered.

How do I resize my keyboard on Flutter?

Step 1: Open the page where you have the TextField widget. Step 2: Locate the Scaffold widget. Step 3: Inside the Scaffold widget, add the resizeToAvoidBottomInset property and set its value to false . Step 4: Re-run the app.


2 Answers

You can simply use SingleChildScrollView:

 AlertDialog(
        content: SingleChildScrollView(
          scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            Text(
              "How Would You Rate Our App?",
              style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
        ),
        ]
    )
    )
)
like image 166
Mo Meshkani Avatar answered Sep 18 '22 05:09

Mo Meshkani


The problem is on the screen behind the Dialog. I faced the same problem but no one of the solutions above worked with my code so I used this code:

resizeToAvoidBottomInset: false,

This line be under "return Scaffold" I found this solution on this page

like image 27
Qudor Eng Avatar answered Sep 19 '22 05:09

Qudor Eng