Search code examples
flutterformattingexpanded

Flutter - Container in row/column to fill space but not expand further


I'm trying to use a Conatiner to create a underline type effect as shown here:

page card title and underline

However, the Container I'm using isn't visible.

I've tried wrapping wrapping the column in an Exapnded but this then fills all of the horizontal space.

The only thing i've found that works (which is a bit of a dirty hack) is to add a text widget as a child of the container with the same text as the title and this makes it the correct width. I'm sure there's something obvious but it's totally escaped me.

Thanks in advance.

    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Column(
          children: [
            // title
            Text(
              title,
              style: baseStyle,
            ),

            // underline
            Container(
              height: 4,
              decoration: BoxDecoration(
                color: Colors.yellow,
                borderRadius: BorderRadius.circular(2),
              ),
              // hacky
              // child: Text(
              //   title,
              //   style: baseStyle,
              // ),
            ),
          ],
        ),
      ],
    );
  }

Solution

  • Wrap your column with IntrinsicWidth.

    Row(
      ...,
      children: [
        IntrinsicWidth(
          child: Column(
            children: [...],
          ),
        ),
      ],
    );