This is my code(The complete project code : https://github.com/mitchkoko/responsivedesign):

import 'package:flutter/material.dart';

class MyDesktopBody extends StatelessWidget {
  const MyDesktopBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple[200],
      appBar: AppBar(
        title: Text('D E S K T O P'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            // First column
            Expanded(
              child: Column(
                children: [
                  // youtube video
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: AspectRatio(
                      aspectRatio: 16 / 9,
                      child: Container(
                        color: Colors.deepPurple[400],
                      ),
                    ),
                  ),

                  // comment section & recommended videos
                  Expanded(
                    child: ListView.builder(
                      itemCount: 8,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            color: Colors.deepPurple[300],
                            height: 120,
                          ),
                        );
                      },
                    ),
                  )
                ],
              ),
            ),

            // second column
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 200,
                color: Colors.deepPurple[300],
              ),
            )
          ],
        ),
      ),
    );
  }
}

When I extend the window size I get the following error:

═╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ The following assertion was thrown during layout: A RenderFlex overflowed by 19 pixels on the bottom. The relevant error-causing widget was:
Column Column:file:///C:/Users/A/Documents/Bandicam/codes/responsivedesign/lib/responsive/desktop_body.dart:20:22 lib\responsive\desktop_body.dart:20 To inspect this widget in Flutter DevTools, visit: http://127.0.0.1:9104/#/inspector?uri=http://127.0.0.1:3204/HgeC4zFKEKs=&inspectorRef=inspector-0 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#84a04 relayoutBoundary=up7 OVERFLOWING: needs compositing creator: Column ← Expanded ← Row ← Padding ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#34509 ink renderer] ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight (can use size) constraints: BoxConstraints(w=1173.6, 0.0<=h<=648.0) size: Size(1173.6, 648.0)
direction: vertical mainAxisAlignment: start mainAxisSize: max
crossAxisAlignment: center verticalDirection: down

I don't know how to wrap items inside the Column to avoid this overlap happening?

CodePudding user response：

The issue using aspectRatio: 16 / 9,. When screen width get bigger and it maintains the aspect ratio it cause overflow.

You can wrap with ConstrainedBox and provide maxHeight by minimizing padding

class MyDesktopBody extends StatelessWidget {
  const MyDesktopBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple[200],
      appBar: AppBar(
        title: Text('D E S K T O P'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              // First column
              Expanded(
                child: Column(
                  children: [
                    // youtube video
                    ConstrainedBox(
                      constraints: BoxConstraints(
                        maxHeight: constraints.maxHeight - 16,
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: AspectRatio(
                          aspectRatio: 16 / 9,
                          child: Container(
                            color: Colors.deepPurple[400],
                          ),
                        ),
                      ),
                    ),

                    // comment section & recommended videos
                    Expanded(
                      child: ListView.builder(
                        itemCount: 8,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              color: Colors.deepPurple[300],
                              height: 120,
                            ),
                          );
                        },
                      ),
                    )
                  ],
                ),
              ),

              // second column
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: 200,
                  color: Colors.deepPurple[300],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

An expanded widget was added inside the column so till when it had space it was not throwing an error. When you expanded the screen aspect ratio widget grew by size pushing the items below outside the screen and hence the error. You can use this layout instead

return Scaffold(
  child: Row(
   children: [
     Flexible(
      child: SingleChildScrollView (
       child: Column(
        mainAxisSize : MainAxisSize.min,
        children: [
          Container(
            constrain : BoxConstrain(
              maxHeight : 600,
            ),
           child: AspectRatio(),
          ),
         //Other widgets
        ]
       )
      )
     ),
     SizedBox(
       width: 200,
       child: ListView.builder()
     )
   ]
  )
);

Here both sections are individually scrollable. And it doesnt theow an overflow error