Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on the bottom

Question

I am need to create to Material Widget per row, but when i create it i wanted to add padding when i do so for the column the yellow error appears with this error:

Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on the bottom.

Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on the bottom.

Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on the bottom.

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed by 0.200 pixels on the right. The relevant error-causing widget was:
Row
Row:file:///E:/work/nabaa_mobile-main/lib/ui/screens/home/widgets/bottom_home_page/home.dart:134:25 To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56940%2FUjrL2FntShg%3D%2F&inspectorRef=inspector-1305 The overflowing RenderFlex has an orientation of Axis.horizontal. 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#164c6
relayoutBoundary=up1 OVERFLOWING: creator: Row ← Column ← Semantics ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#020b0 ink renderer] ← NotificationListener ← CustomPaint ←
_ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use
size) constraints: BoxConstraints(0.0<=w<=135.2, 0.0<=h<=Infinity)
size: Size(135.2, 40.0) direction: horizontal mainAxisAlignment:
start mainAxisSize: max crossAxisAlignment: center textDirection: ltr verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ════════════════════════════════════════════════════════════════════════════════════════════════════ Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Another exception was thrown: A RenderFlex overflowed by 0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Another exception was thrown: A RenderFlex overflowed by 0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Another exception was thrown: A RenderFlex overflowed by 0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Performing hot reload... Reloaded 1 of 1166 libraries in 4,534ms. Performing hot reload... Reloaded 1 of 1166 libraries in 3,199ms. ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed by 0.200 pixels on the right. The relevant error-causing widget was:
Row
Row:file:///E:/work/nabaa_mobile-main/lib/ui/screens/home/widgets/bottom_home_page/home.dart:140:27 To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56940%2FUjrL2FntShg%3D%2F&inspectorRef=inspector-2705 The overflowing RenderFlex has an orientation of Axis.horizontal. 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#4f67e
relayoutBoundary=up1 OVERFLOWING: creator: Row ← Column ← Padding ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#c9285 ink renderer] ← NotificationListener ← CustomPaint ←
_ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use
size) constraints: BoxConstraints(0.0<=w<=135.2, 0.0<=h<=Infinity)
size: Size(135.2, 40.0) direction: horizontal mainAxisAlignment:
start mainAxisSize: max crossAxisAlignment: center textDirection: ltr verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ════════════════════════════════════════════════════════════════════════════════════════════════════ Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom.

========================================================================

the code is

 GridView.count(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                crossAxisCount: 2,
                mainAxisSpacing: 4,
                scrollDirection: Axis.vertical,
                crossAxisSpacing: 4.w,

                // padding: EdgeInsets.all(9),
                children: List.generate(4, (index) {
                  return Material(
                    // padding: const EdgeInsets.all(8.0),
                    shape: RoundedRectangleBorder(
                      // side: ,

                      borderRadius: BorderRadius.circular(18.0),
                    ),
                    type: MaterialType.button,
                    color: whiteColor,
                    elevation: 5,
                    // clipBehavior: Clip.antiAliasWithSaveLayer,

                    shadowColor: blackColor.withOpacity(0.5),
                    child: Column(
                      children: [
                        Row(
                          children: [
                            CircleAvatar(
                              foregroundColor: blackColor,
                              child: ClipOval(
                                child:
                                    Image.asset('assets/images/meta-logo.png'),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsetsDirectional.only(start: 4.w),
                              child: Text(
                                "company_name".tr,
                                // textAlign: TextAlign.end,
                                style: Get.textTheme.headline3!
                                    .copyWith(color: faddenGreyColor),
                              ),
                            ),
                          ],
                        ),
                        Align(
                          alignment: AlignmentDirectional.centerStart,
                          heightFactor: 0.3.h,
                          child: Text(
                            "opportunity_title".tr,
                            style: Get.textTheme.headline4,
                          ),
                        ),
                        Row(
                          children: [
                            Icon(
                              Icons.calendar_today_outlined,
                              color: faddenGreyColor,
                              size: 13.sp,
                            ),
                            Padding(
                              padding: EdgeInsetsDirectional.only(start: 2.w),
                              child: Text(
                                "date".tr,
                                style: Get.textTheme.headline3!.copyWith(
                                  color: faddenGreyColor,
                                ),
                              ),
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            Icon(
                              Icons.location_on_outlined,
                              color: faddenGreyColor,
                              size: 15.sp,
                            ),
                            Padding(
                              padding: EdgeInsetsDirectional.only(start: 2.w),
                              child: Text(
                                "location".tr,
                                style: Get.textTheme.headline3!.copyWith(
                                  color: faddenGreyColor,
                                ),
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 2.h),
                      ],
                    ),
                  );
                }),
              ),

Answer 1

Expanded all your widget in Column

GridView.count(
        shrinkWrap: true,
        physics: const ScrollPhysics(),
        crossAxisCount: 2,
        mainAxisSpacing: 4,
        scrollDirection: Axis.vertical,
        crossAxisSpacing: 4,

        // padding: EdgeInsets.all(9),
        children: List.generate(4, (index) {
          return Material(
            // padding: const EdgeInsets.all(8.0),
            shape: RoundedRectangleBorder(
              // side: ,

              borderRadius: BorderRadius.circular(18.0),
            ),
            type: MaterialType.button,

            elevation: 5,
            // clipBehavior: Clip.antiAliasWithSaveLayer,
            color: Colors.white,

            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        Expanded(
                          child: CircleAvatar(
                            child: ClipOval(
                              child: Image.asset('images/profile.png'),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsetsDirectional.only(start: 4),
                            child: Text(
                              "company_name",
                              // textAlign: TextAlign.end,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Align(
                      alignment: AlignmentDirectional.centerStart,
                      heightFactor: 0.3,
                      child: Text(
                        "opportunity_title",
                      ),
                    ),
                  ),
                  Expanded(
                    child: Row(
                      children: [
                        Expanded(
                          child: Icon(
                            Icons.calendar_today_outlined,
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsetsDirectional.only(start: 2),
                            child: Text(
                              "date",
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Row(
                      children: [
                        Expanded(
                          child: Icon(
                            Icons.location_on_outlined,
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: EdgeInsetsDirectional.only(start: 2),
                            child: Text(
                              "location",
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        }),
      ),

output:

Answer 2

-> Use Can Use For This Code SingleChildScrollView

 import 'package:flutter/material.dart';
    class Data extends StatefulWidget {
      const Data({Key? key}) : super(key: key);
      @override
      _DataState createState() => _DataState();
    }
    
    class _DataState extends State<Data> {
      @override
      Widget build(BuildContext context) {
        return SingleChildScrollView(
          child: GridView.count(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            crossAxisCount: 2,
            mainAxisSpacing: 4,
            scrollDirection: Axis.vertical,
            crossAxisSpacing: 4,
            // padding: EdgeInsets.all(9),
            children: List.generate(4, (index) {
              return Material(
                // padding: const EdgeInsets.all(8.0),
                shape: RoundedRectangleBorder(
                  // side: ,
                  borderRadius: BorderRadius.circular(18.0),
                ),
                type: MaterialType.button,
                color: Colors.white,
                elevation: 5,
                // clipBehavior: Clip.antiAliasWithSaveLayer,
                shadowColor: Colors.black.withOpacity(0.5),
                child: Column(
                  children: [
                    Row(
                      children: [
                        CircleAvatar(
                          foregroundColor: Colors.black,
                          child: ClipOval(
                            child: Image.asset('assets/images/meta-logo.png'),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsetsDirectional.only(start: 4),
                          child: Text(
                            "company_name",
                            // textAlign: TextAlign.end,
                            style: TextStyle(),
                          ),
                        ),
                      ],
                    ),
                    Align(
                      alignment: AlignmentDirectional.centerStart,
                      child: Text(
                        "opportunity_title",
                        style: TextStyle(),
                      ),
                    ),
                    Row(
                      children: [
                        Icon(
                          Icons.calendar_today_outlined,
                          color: Colors.red,
                          size: 13,
                        ),
                        Padding(
                          padding: EdgeInsetsDirectional.only(start: 2),
                          child: Text(
                            "location",
                            style: TextStyle(),
                          ),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        Icon(
                          Icons.location_on_outlined,
                          color: Colors.red,
                          size: 15,
                        ),
                        Padding(
                          padding: EdgeInsetsDirectional.only(start: 2),
                          child: Text(
                            "location",
                            style: TextStyle(),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 2),
                  ],
                ),
              );
            }),
          ),
        );
      }
    }