londonappbrewery / bmi-calculator-flutter

Learn to Code While Building Apps - The Complete Flutter Development Bootcamp
https://www.appbrewery.co
192 stars 837 forks source link

OVERFLOWING when iPhone rotates #6

Open TUKenStone opened 4 years ago

TUKenStone commented 4 years ago

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 commented 4 years ago

same problem .. have you found any solution?

fbitti commented 4 years ago

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 commented 4 years ago

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

Scaffold(
      appBar: AppBar(
        title: Text('BMI CALCULATOR'),
      ),
      body: LayoutBuilder(...),
);
Sushil211 commented 4 years ago

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.