How to layout a column of buttons with their widths equal to the width of the widest one in Flutter?

Question

How can I make the following buttons the same width as the widest one (in this case the last one)? I don't want to hardcode to make all equal to the last one, because, e.g., when switched to a different language, it might not be the last button that is widest.

The code I am using:

Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: Column(
      children: [
        Spacer(flex: 1),
        Text(
          'Flutter Test',
          style: Theme.of(context).textTheme.headline1,
        ),
        Spacer(flex: 2),
        Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(child: 
              Column(
                children: [
                  ElevatedButton(
                    onPressed: () {
                    },
                    child: Text('Apple'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                    },
                    child: Text('Banana'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                    },
                    child: Text('Chery'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                    },
                    child: Text('Durian'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text('Emu apple fruit'),
                  ),
                ],
              ),
            ),
          ],
        ),
        Spacer(flex: 3),
      ],
    ),
  ),
);
}

Thanks!

Solution

Firstly, you don't need the Row and the Expanded widgets that you have used for the Column widget because they make no sense.

Now, to achieve what you're looking for can be done by wrapping the Column widget using the IntrinsicWidth widget and setting the Column(property: crossAxisAlignment: CrossAxisAlignment.stretch.

The complete code should be as:

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Spacer(flex: 1),
            Text(
              'Flutter Test',
              style: Theme.of(context).textTheme.headline1,
            ),
            Spacer(flex: 2),
            IntrinsicWidth(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Apple'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Banana'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Chery'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Durian'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text('Emu apple fruit'),
                  ),
                ])),
            Spacer(flex: 3),
          ],
        ),
      ),
    );
  }

Comments

[user2633218]

I don't want to fix the width. Just want to be the same as the widest one, which just fit the text.