0

Image You can see from the image, 1 line and 6 lines are the same size. If I had one that is 20 lines, they would also be the same size as the biggest.

There is no property for the minimum size on a container within Flutter. So if I have some container Text widgets with 10 lines and others with 1. How can I make a minimum size so they look more even?

Column(
  children: <Widget> [
    Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15), color: Colors.white),
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 12.0),
                  child: Text(
                    '10 lines worth of text.....',
                    style: TextStyle(
                        fontSize: 16.0,
                        fontFamily: 'NotoSans',
                        color: Colors.black),
                  ),
                ),
              ],
            ),
        ),
        Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15), color: Colors.white),
            padding: EdgeInsets.symmetric(horizontal: 10.0),
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 12.0),
                  child: Text(
                    '1 line of Text',
                    style: TextStyle(
                        fontSize: 16.0,
                        fontFamily: 'NotoSans',
                        color: Colors.black),
                  ),
                ),
              ],
            ),
        ),
]),
boatbuyer
  • 3
  • 2
  • "so they look more even?" Put this in a more specific context, at least clarify their parent - e.g. do you want them to be placed in a column? in this case, wrap each container in a Flexible or Expanded then give a flex: 1 will do. – Wenhui Luo Jun 01 '20 at 14:56
  • Yes parent is column. I receive this. RenderFlex children have non-zero flex but incoming height constraints are unbounded. – boatbuyer Jun 01 '20 at 15:16
  • Okay so I added, MainAxisSize.min to the Column and wrapped each widget in Flexible with Flex: 1. It returns the same results as before I edited them. – boatbuyer Jun 01 '20 at 15:21
  • Expanded works on my test example. – Wenhui Luo Jun 01 '20 at 15:24
  • Expanded on the Containers? or on the Text? If I do it on the Text they are different sizes. – boatbuyer Jun 02 '20 at 15:38
  • Also Expanded on the Containers doesn't work, because then they all have the same sized Containers (Sharing the size of the column). Having the same sized containers doesn't work because the container with 1 line of text will be huge. – boatbuyer Jun 02 '20 at 15:39
  • Can you share ui as you want? – Nikhil Vadoliya Jun 03 '20 at 13:44

0 Answers0