Dynamic size of container - Flutter-CodePudding

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 this

CodePudding user response：

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.

CodePudding user response：

You should always make give size related to width and height of the screen to make the app perfectly responsive

for example you can create a variable

 double width = MediaQuery.of(context).size.width;
 double height = MediaQuery.of(context).size.height;

and use it for you Container or fontsize for example

import 'package:flutter/material.dart';

class TestWidget extends StatefulWidget {
  const TestWidget({Key? key}) : super(key: key);

  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Container(
      height: height,
      width: width / 2,
      child: Text('test',
          style: TextStyle(
            fontSize: width * 0.035,
          )),
    );
  }
}

And for avoiding overflow you can always user Wrap or Expanded(inside a row or column).