When the keyboard appears the Flutter widgets resize How to prevent this

0 votes

I have a Column of Expanded widgets like this:

 return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            flex: 1,
            child: convertFrom,
          ),
          new Expanded(
            flex: 1,
            child: convertTo,
          ),
          new Expanded(
            flex: 1,
            child: description,
          ),
        ],
      ),
    );

It looks like this:

enter image description here

convertFrom, includes a TextField. When I tap on this text field, the Android keyboard appears on the screen. This changes the screen size, so the widgets resize like this:

enter image description here

Is there a way to have the keyboard "overlay" the screen so that my Column doesn't resize? If I don't use Expanded widgets and hardcode a height for each widget, the widgets don't resize, but I get the black-and-yellow striped error when the keyboard appears (because there isn't enough space). This also isn't flexible for all screen sizes.

I'm not sure if this is an Android-specific or Flutter-specific.

Mar 10, 2023 in Android by sarit
• 1,830 points
9,433 views

1 answer to this question.

0 votes

This is a common issue in Flutter when the keyboard appears and causes the screen to resize. To prevent the widgets from resizing, you can wrap your Column inside a SingleChildScrollView widget and set its physics to NeverScrollableScrollPhysics. This will make the column scrollable and prevent it from resizing when the keyboard appears.

Here's how you can modify your code:

return Scaffold(
      body: SingleChildScrollView(
        physics: NeverScrollableScrollPhysics(),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: convertFrom,
              ),
              Expanded(
                flex: 1,
                child: convertTo,
              ),
              Expanded(
                flex: 1,
                child: description,
              ),
            ],
          ),
        ),
      ),
    );

By wrapping the Column widget inside a SingleChildScrollView with NeverScrollableScrollPhysics, the column won't resize when the keyboard appears. The SingleChildScrollView will allow you to scroll the content of the column if the keyboard overlaps with it.

I hope this helps!

answered Mar 18, 2023 by vinayak

Related Questions In Android

0 votes
2 answers

How to change the application launcher icon on Flutter? Ask Question

how to change the app icon in ...READ MORE

answered Nov 29, 2023 in Android by anonymous
9,482 views
0 votes
0 answers

How to get the device's IMEI/ESN programmatically in android?

I want to use the IMEI to ...READ MORE

Nov 16, 2022 in Android by Edureka
• 12,690 points
969 views
0 votes
0 answers

How to implement the system lock screen in your own android app?

How should the system lock screen be ...READ MORE

Nov 22, 2022 in Android by Edureka
• 12,690 points
428 views
0 votes
0 answers

How to open the Google Play Store directly from my Android application?

I have open the Google Play store ...READ MORE

Nov 23, 2022 in Android by Ashwini
• 5,430 points
423 views
0 votes
1 answer

How to create number input field in Flutter?

Yes, Flutter has a built-in widget called ...READ MORE

answered Mar 1, 2023 in Android by vishalini
3,669 views
0 votes
1 answer

How can I dismiss the on screen keyboard?

To dismiss the on-screen keyboard, you can ...READ MORE

answered Mar 1, 2023 in Android by vishalini
1,295 views
0 votes
1 answer

How do I supply an initial value to a text field?

To supply an initial value to a ...READ MORE

answered Mar 9, 2023 in Android by pooja
5,337 views
0 votes
1 answer

How to make a TextField with HintText but no Underline?

You can achieve this by using the ...READ MORE

answered Mar 21, 2023 in Flutter by Anushi
1,636 views
0 votes
1 answer

How to open the Google Play Store directly from my Android application?

If you want to link to your ...READ MORE

answered Nov 7, 2022 in Android by Edureka
• 12,690 points
3,283 views
0 votes
1 answer

How can I add a border to a widget in Flutter?

To add a border to a widget ...READ MORE

answered Mar 1, 2023 in Android by vishalini
7,255 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP