I am trying to create a welcome screen using flutter ,but when I change the device orientation to landscape it gives me an error. What I am trying to do is that When the user changes the device orientation to landscape the content should reduce it size to the available size I don't want to wrap it in SingleChildScrollView.

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════

The following assertion was thrown during layout:

A RenderFlex overflowed by 227 pixels on the bottom.


The relevant error-causing widget was:

  Column Column:/lib/welcome.dart:18:15


The overflowing RenderFlex has an orientation of Axis.vertical.

The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and

black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the

RenderFlex to fit within the available space instead of being sized to their natural size.

This is considered an error condition because it indicates that there is content that cannot be

seen. If the content is legitimately bigger than the available space, consider clipping it with a

ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,

like a ListView.

The specific RenderFlex in question is: RenderFlex#44483 relayoutBoundary=up1 OVERFLOWING:

  needs compositing

  creator: Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←

    CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←

    _InkFeatures-[GlobalKey#1ab81 ink renderer] ← NotificationListener ←

    PhysicalModel ← AnimatedPhysicalModel ← ⋯

  parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)

  constraints: BoxConstraints(0.0<=w<=638.0, 0.0<=h<=360.0)

  size: Size(638.0, 360.0)

  direction: vertical

  mainAxisAlignment: start

  mainAxisSize: max

  crossAxisAlignment: center

  verticalDirection: down

I tried to wrap the entire body in an Expanded and Flexible widget but it shows

Another exception was thrown: Incorrect use of ParentDataWidget.

Another exception was thrown: Every child of a RenderCustomMultiChildLayoutBox must have an ID in its parent data.

How can I reduce the content size when orientation changes to landscape ?

This is my code:

      home: Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Color(0xffFEF3F0),
          body: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: Center(
                  child: Container(
                    child: Image.asset(
                      'images/blogg.png',
                      width: 201.6,
                      height: 100,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
              Text(
                'Express more than writings',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
              ),
              SizedBox(height: 20),
              Container(
                child: Image.asset(
                  'images/drib1.PNG',
                  height: 300,
                  fit: BoxFit.cover,
                ),
              ),
              SizedBox(height: 50),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.black,
                  onPrimary: Colors.white,
                  shadowColor: Color(0xff7d817e),
                  elevation: 3,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(32.0)),
                  minimumSize: Size(330, 45),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Register()),
                  );
                },
                child: Text('Join for free'),
              ),
              SizedBox(height: 20),
              TextButton(
                style: ButtonStyle(
                  overlayColor: MaterialStateProperty.resolveWith<Color>(
                    (Set<MaterialState> states) {
                      return Colors.transparent;
                    },
                  ),
                  splashFactory: NoSplash.splashFactory,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => login()),
                  );
                },
                child: Text(
                  "if you have an account,Sign in",
                  style: TextStyle(color: Colors.black, fontSize: 16.0),
                ),
              )
            ],
          )),
    

CodePudding user response：

Use the OrientationBuilder (https://api.flutter.dev/flutter/widgets/OrientationBuilder-class.html)

Here is an example how to use it:

body: OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
),

Moreover you could use MediaQuery.of(context).size to get the actual screen size. Use values based on the screenSize (like: sreenSize.height * 0.5) instead of constant values.

CodePudding user response：

You'll have to set a SizedBox with the screen height at the parent of your Column widget:

  Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Color(0xffFEF3F0),
      body: SizedBox(
             height: Mediaquery.of(context).size.height,
             child: Column(
                 children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0),
                      child: Center(