Flutter: How to prevent an container overflowing inside a padding-CodePudding

The Problem

I have a card that contains a row of two elements, the second one being a column of two texts. One of the texts can be long, so the column-element itself can overflow.

Coming from CSS, a "width: 100%" would usually be enough here.

What I already tried

I learned you could wrap the column with something like Expanded or Flexible, but it leads the text to become invisible (and the overflow still existing). I am not sure where exactly I have to put the Flexible/Expanded.

I looked into similar questions and there was always an "Expanded", but I could not apply any of said solutions to my layout so far.

Question

What is the cleanest way to get the outlined box to be only as wide as the padding should allow?

Code

@override
Widget build(BuildContext context) {
  return (Card(
    child: InkWell(
      onTap: () {
        print("tab"   name);
      },
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(25),
              child: SizedBox(
                width: 50,
                height: 50,
                child: Image(
                  image: NetworkImage(imageUrl),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 1, color: Colors.purpleAccent),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(fontWeight: FontWeight.bold),
                      textAlign: TextAlign.left,
                    ),
                    Text(
                      description,
                      overflow: TextOverflow.ellipsis,
                      textAlign: TextAlign.left,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}

CodePudding user response：

You can surround the Padding widget inside your Row with an Expanded widget - The child of Expanded will then size itself to the space available.

For some additional context, Rows and Columns are both Flex widgets. Flex widgets layout their children along an axis, and the size of this axis is unbounded by default. Even though the widget "knows" how much space it has available on the display, it doesn't pass that information along to its children, so the children are free to take whatever size they want, which means they can potentially overflow the container.

An Expanded widget can only be placed as a direct child of a Flex widget, and it automatically takes up a given proportion (given by the flex property) of the space available to it (by default that will simply be all of the space which is not taken up by other widgets in the children list).

So essentially, Expanded will take up as much space as the parent widget has available, and then will constrain it's child to be no larger than that (along whichever axis pertains).

The link above to the Flex documentation has more info.