I have two ElevatedButtons inside a Row widget and I need both of them to be the same length but only as large as the largest button.

Here's my current code:

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text('Some long text'),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Short'),
            ),
          ],
        ),
      ),
    );
  }
}

As you can see, one button is much larger than the other one. Is it possible to make the "Short" button as long as the "Some long text" button?

I figured I could use Expanded to make them the same size but I don't want this because I need them to use the least possible length while still being the same size and not needing to shrink one of them.

Thanks in advance.

CodePudding user response：

I found that you can wrap the Row with the IntrinsicWidth widget (and all of the Rows children with Expanded) and it works as you want, but the description of it says:

This class is relatively expensive. Avoid using it where possible.

IntrinsicWidth(
  child: Row(
    children: [
      Expanded(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Some long text'),
        ),
      ),
      Expanded(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Short'),
        ),
      ),
    ],
  ),
)