I'm trying to use a Conatiner to create a underline type effect as shown here:
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,
// ),
),
],
),
],
);
}
Wrap your column with IntrinsicWidth
.
Row(
...,
children: [
IntrinsicWidth(
child: Column(
children: [...],
),
),
],
);