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.


