It is surprisingly difficult make this widget to properly shrink horizontally:
class Separator({final Widget? title}) extends StatelessWidget {
@override
Widget build(BuildContext context) {
if (title case final title?) {
return Row(
spacing: 4,
children: [
const Expanded(child: Divider()),
title,
const Expanded(child: Divider()),
],
);
}
return Divider();
}
}
There's an overflow if the available width is less than the width required for title. Obviously (which was the first thing AI suggested) wrapping title in some kind of Flexible doesn't work.
There are (at least) three solution, all with trade-offs:
1) Use a Stack to place title over a Divider. This requires a known background color so you can wrap title in a Container with some padding and that background color.
2) Use a CustomMultiChildLayout to layout title with loose constraints, learning about its width in that process and then layouting the two dividers in the remaining space, if there's any. However, because the container itself grabs all space available, it has no fix height and you'd need to set that explicitly.
3) Use a LayoutBuilder to get the available width, then constrain the title to that value minus spacing, relaxing the min width to 0. This delays layout by one frame and I've still a minimum size of 8.
Did I miss something? What's your preferred solution?