Solved: OverflowBox RenderBox was not laid out: RenderRepaintBoundary#7796e NEEDS-LAYOUT NEEDS-PAINT

Question

Asked by winter on December 16, 2021 (source).

I use OverflowBox, but i get this issue.

The following RenderObject was being processed when the exception was fired: RenderConstrainedOverflowBox#8530c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE: needs compositing creator: OverflowBox ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#f1374 ink renderer] ← NotificationListener ← PhysicalModel ← AnimatedPhysicalModel ← ⋯ parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
constraints: BoxConstraints(0.0<=w<=331.2, 0.0<=h<=164.8) size: Size(331.2, 164.8) alignment: Alignment.center textDirection: ltr minWidth: Infinity maxWidth: use parent maxWidth constraint
minHeight: 200.0 maxHeight: 200.0 This RenderObject had the following descendants (showing up to depth 5): child: RenderRepaintBoundary#7796e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child: RenderCustomPaint#57723 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child: RenderRepaintBoundary#6b624 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child: _RenderScrollSemantics#80ff2 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child: RenderPointerListener#c1da5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#7796e NEEDS-LAYOUT NEEDS-PAINT

The Code Is:

 Scaffold(
      body: OverflowBox(
        minWidth: double.infinity,
        child: GridView.count(
          crossAxisCount: 5,
          padding: EdgeInsetsDirectional.only(top: 2.h),
          childAspectRatio: 2,
          crossAxisSpacing: 3.w,
          mainAxisSpacing: 3.w,
          clipBehavior: Clip.none,
          children: List.generate(
            5,
            (index) => Material(
              shape: RoundedRectangleBorder(
                // side: ,
                borderRadius: BorderRadius.circular(10.0),
              ),
              color: whiteColor,
              elevation: 5,
              clipBehavior: Clip.antiAliasWithSaveLayer,
              shadowColor: shadowColor.withOpacity(0.5),
              child: Text(
                "Skill${index + 1}",
                textAlign: TextAlign.center,
                // textDirection: TextDirection.,

                // textDirection: TextD,

                style: Get.textTheme.headline3!.copyWith(
                  color: faddenGreyColor,
                ),
              ),
            ),
          ),
        ),
      ),

Answer

Question answered by Ravindra S (source).

Try below code hope its help to you. I think this problem is minWidth: double.infinity, remove this and add shrinkWrap: true, to the inside GridView

Refer GridView here

Create Grid list here

Refer shrinkWrap proprty here

 OverflowBox(
      child: GridView.count(
      shrinkWrap: true,
      // physics: NeverScrollableScrollPhysics(),// if you add extra index(like 10,50,etc) then used physics
      crossAxisCount: 2,
      padding: EdgeInsetsDirectional.only(top: 2),
      childAspectRatio: 2,
      crossAxisSpacing: 3,
      mainAxisSpacing: 3,
      clipBehavior: Clip.none,
      children: List.generate(
        5,
        (index) => Material(
          shape: RoundedRectangleBorder(
            // side: ,
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          child: Center(
               child: Text(
               "Skill${index + 1}",
               textAlign: TextAlign.center,
             ),
          ),
        ),
      ),
    ),
  ),

Your result screen-> image

FLUTTER WIDGET
SHARE: