Shrink container to smaller child rather than expanding to fill parent

Issue

I'm creating a custom widget for a segment control.

return Padding(
  padding: const EdgeInsets.symmetric(vertical: 20.0),
  child: Container(
    decoration: BoxDecoration(border: Border.all(color: Colors.blue)),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: buttons,
    ),
  ),
);

I want the container to shrink to the minimum size to contain its children. However when I include the widget in a parent, it expands to fill the parent. This is visible because the border from the decoration is larger than the buttons.

How do I force the container to shrink?

Solution

To get the container not to take up the entire parent, you need to tell it where it should be placed within the parent - by default, it doesn't know where to go so it fills the parent =D.

The simplest ways of doing this are to use an Align or a Center widget. I believe you want to put it around your Container in this case, but I'm not 100% sure.

Answered By - rmtmckenzie