[Flutter]Layout/Build Container's size based on its sibling widget(both widget is the children of Column)

Question

I have a widget layout like this:

And here's the code of it:

      Column(
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.lightbulb_outline),
              SizedBox(
                width: 4,
              ),
              Text(
                'Something something something',
                style: kTextRegularW500,
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(top: 13.0),
            child: Container(
              padding: EdgeInsets.symmetric(
                vertical: 17,
              ),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Center(
                child: Text(
                  'Next',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      )

Question:

How to make the "button" widget (Padding, the second widget in the Column) the same width as the Row(the first widget of the Column) above it?

What I have tried:

I simply added a fixed width to the Container that render as the button, and here's the result:

Here's the code:(I only append the Container(button) part of it)

             Container(
              width: 300,
              padding: EdgeInsets.symmetric(
                vertical: 17,
              )

Even adding a fixed width to Container achieve what I want, but it's just fixed for this particular case... if the text above the button become longer, I will be back to where I was facing at the first place...

So, the only solution I can come up with is to find a way to make the Container the same width as the Row above it, or obtaining the size from a sibling widget then apply it, but I don't know how even after hours searching...

Or if you have any other way to make the button(Container) the same size as the Row, you are welcomed to share.

Answer 1

wrap your column with IntrinsicWidth

IntrinsicWidth(
      child: Column(
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.lightbulb_outline),
              SizedBox(
                width: 4,
              ),
              Text(
                'Something something something something',
               // style: kTextRegularW500,
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(top: 13.0),
            child: Container(
              padding: EdgeInsets.symmetric(
                vertical: 17,
              ),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Center(
                child: Text(
                  'Next',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    )

output: