OVERFLOWING when iPhone rotates

[TUKenStone]

The specific RenderFlex in question is: RenderFlex#d63a4 relayoutBoundary=up5 OVERFLOWING
... parentData: (can use size)
... constraints: BoxConstraints(w=418.0, 0.0<=h<=59.3)
... size: Size(418.0, 59.3)
... direction: vertical
... mainAxisAlignment: center
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
A RenderFlex overflowed by 57 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/kenaitian/projects/bmi-calculator-flutter/lib/icon_content.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

[MohammadAlhallaq]

same problem ..
have you found any solution?

[fbitti]

Yes, this solution https://stackoverflow.com/a/56327933 worked for me, and not only the content overflow error disappeared, the resulting screen expands to match the new orientation so it also looks good.
In each page of your app, cut your Column(...), code and paste it inside the following block of code.

LayoutBuilder(
          builder: (context, constraint) {
            return SingleChildScrollView(
              child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: constraint.maxHeight),
                child: IntrinsicHeight(
                  child: // <=== the Column(...), code comes here
                ),
              ),
            );
          },
        ),

I tested it in both the Android emulator and the iPhone simulator. Please confirm it also works for you.
I wish Flutter already had a simpler widget for this task, maybe it does but I couldn't find one. But, hey, we may always create our own widget as Angela taught us.

[fbitti]

For completeness, this is how your Scaffold should look with the above changes:

Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: LayoutBuilder(...),
);

[Sushil211]

Yes, this solution https://stackoverflow.com/a/56327933 worked for me, and not only the content overflow error disappeared, the resulting screen expands to match the new orientation so it also looks good.
In each page of your app, cut your Column(...), code and paste it inside the following block of code.

LayoutBuilder(
          builder: (context, constraint) {
            return SingleChildScrollView(
              child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: constraint.maxHeight),
                child: IntrinsicHeight(
                  child: // <=== the Column(...), code comes here
                ),
              ),
            );
          },
        ),

I tested it in both the Android emulator and the iPhone simulator. Please confirm it also works for you.
I wish Flutter already had a simpler widget for this task, maybe it does but I couldn't find one. But, hey, we may always create our own widget as Angela taught us.

Yeah man, that works!! Thank you.