flutter 底部溢出 227 像素的 RenderFlex

Question

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),
                ),
              )
            ],
          )),
    

Answer 1

As mentioned in the comment you can use the LayoutBuilder :

You can either only influence the height of your widgets with it (if you don't want to change the layout):

LayoutBuilder(
            builder: (context,constraints) {
              return Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 10.0),
                    child: Center(
                      child: Image.network(
                        'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                        // width: 201.6,
                        height: constraints.maxHeight*0.2,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  const Text(
                    'Express more than writings',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
                  ),
                  const SizedBox(height: 20),
                  Image.network(
                    'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                    height: constraints.maxHeight*0.35,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(height: constraints.maxHeight*0.04),
                  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: () {},
                    child: const Text('Join for free'),
                  ),
                  SizedBox(height: constraints.maxHeight*0.01),
                  TextButton(
                    style: ButtonStyle(
                      overlayColor: MaterialStateProperty.resolveWith<Color>(
                        (Set<MaterialState> states) {
                          return Colors.transparent;
                        },
                      ),
                      splashFactory: NoSplash.splashFactory,
                    ),
                    onPressed: () {},
                    child: const Text(
                      'if you have an account,Sign in',
                      style: TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  )
                ],
              );
            }
          ),
      ),

or you set a breakpoint from which your layout should change:

LayoutBuilder(
          builder: (context, constraints) {
            final maxHeight = constraints.maxHeight;
            if (maxHeight > 500) {
              return Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 10.0),
                    child: Center(
                      child: Image.network(
                        'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                        // width: 201.6,
                        height: maxHeight * 0.2,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  const Text(
                    'Express more than writings',
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
                  ),
                  const SizedBox(height: 20),
                  Image.network(
                    'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                    height: maxHeight * 0.35,
                    fit: BoxFit.cover,
                  ),
                  SizedBox(height: maxHeight * 0.04),
                  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: () {},
                    child: const Text('Join for free'),
                  ),
                  SizedBox(height: maxHeight * 0.01),
                  TextButton(
                    style: ButtonStyle(
                      overlayColor: MaterialStateProperty.resolveWith<Color>(
                        (Set<MaterialState> states) {
                          return Colors.transparent;
                        },
                      ),
                      splashFactory: NoSplash.splashFactory,
                    ),
                    onPressed: () {},
                    child: const Text(
                      'if you have an account,Sign in',
                      style: TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  )
                ],
              );
            }
            return Center(
              child: Column(
                children: [
                  const SizedBox(height: 20),
                  Image.network(
                    'https://pbs.twimg.com/media/FKNlhKZUcAEd7FY?format=jpg&name=small',
                    height: maxHeight * 0.5,
                    fit: BoxFit.cover,
                  ),
                  const Text(
                    'Express more than writings',
                    style:
                        TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
                  ),
                  SizedBox(height: maxHeight * 0.04),
                  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: () {},
                    child: const Text('Join for free'),
                  ),
                  SizedBox(height: maxHeight * 0.01),
                  TextButton(
                    style: ButtonStyle(
                      overlayColor: MaterialStateProperty.resolveWith<Color>(
                        (Set<MaterialState> states) {
                          return Colors.transparent;
                        },
                      ),
                      splashFactory: NoSplash.splashFactory,
                    ),
                    onPressed: () {},
                    child: const Text(
                      'if you have an account,Sign in',
                      style: TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  )
                ],
              ),
            );
          },
        ),

If you use the second way it's better to make an own widget for the layout, otherwise your code gets unclear.

Answer 2

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: double.infinity,
             child: Column(
                 children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0),
                      child: Center(