A RenderFlex overflowed by 61 pixels on the bottom Inside a Single Child Scroll View

Question

I have a screen which I wanna insert some checkBoxes dynamically, but in this example I fixed three on it just to test. This is the code:

Expanded(
  flex: 3,
  child: Padding(
    padding: EdgeInsets.all(10),
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: AppColorSecondary,
        ),
        borderRadius: BorderRadius.all(Radius.circular(20))
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(i.description, textAlign: TextAlign.center,style: TextStyle(fontWeight: FontWeight.bold),),
          SizedBox(height: 3,),
          Text("Cod: ${i.code}", textAlign: TextAlign.center,),
          Divider(),
          Text("R\$ ${i.value.toString()}"),
          SingleChildScrollView( // the error is here
            child: Column(
              children: [
                CheckboxListTile(
                  title: Text("AA"),
                  value: true,
                ),
                CheckboxListTile(
                  title: Text("AA"),
                  value: true,
                ),
                CheckboxListTile(
                  title: Text("AA"),
                  value: true,
                ),
              ],
           ),
       ),],
        ),
      padding: EdgeInsets.all(10),
))),

Running this, it throws this error:

A RenderFlex overflowed by 61 pixels on the bottom.

I just wanna make it scrollable to be able to show all the checkboxes. What am I doing wrong?

Answer 1

this is because you are nesting SingleChildScrollView with Column

what you need to do is to give the SingleChildScrollView a parent container with fixed height

otherwise it should be placed in flex widget like Expanded or flexible which will gives it fixed height also behind the scene but depending on the other items in colmun/row

Answer 2

wrap the SingleChildScrollView with Expanded since it is inside a column so as to aquire the max space left in the column

Expanded(
 child:SingleChildScrollView(
  child:Column(
   children:[
     CheckboxListTile(
      title: Text("AA"),
      value: true,
     ),
     CheckboxListTile(
      title: Text("AA"),
      value: true,
     ),
     CheckboxListTile(
      title: Text("AA"),
      value: true,
     ),
   ]
  )
 )
)