Search code examples
flutteruser-interfacecontainersflutter-layout

Dynamic size of container - Flutter

I'm new to flutter and came across an issue with Container widget's size that has Row and Column as it's child. I'm aiming to render a Column and Row widget with dynamic data. The code is as below.

Container(
 decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(35),
  color: Colors.orange.shade400,
 ),
 child: Padding(
  padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 25.0),
  child: Column(
   children: <Widget>[
    Text("PEAK/THURSDAY"),
    Text("\$24,355"),
    weeklyExpenseBuilder(), // Row with Text widgets
   ],
  ),
 ),
)

Not fixing the size of the container allows it to take up all the screen space but fixing it's height leads to RenderFlex overflow error. Is there any way to let the Container widget take only as much space as it's children take. The design that i'm aiming to looks something like thisenter image description here

Solution

  • The mainAxisSize property of a Row or Column is max by default.

    Try setting mainAxisSize: MainAxisSize.min on both the row and column and adding some spacing.