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 in Android by sarit
• 1,190 points
1,060 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 by vinayak

Related Questions In Android

0 votes
1 answer

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

Yes, you can change the launcher icon ...READ MORE

answered Mar 1 in Android by vishalini
137 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
• 11,930 points
426 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
• 11,930 points
132 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
• 4,070 points
91 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 in Android by vishalini
62 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 in Android by vishalini
1,029 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 in Android by pooja
55 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 in Flutter by Anushi
40 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
• 11,930 points
661 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 in Android by vishalini
65 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