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

user_2633218 0
Viewed 573

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.

Column of buttons

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!

flutter button layout
4 Answers

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.

enter image description here

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),
          ],
        ),
      ),
    );
  }
user_58823070

Since the ElevatedButton changes its width according to the length of the child string passed by Text widget, you can contain the elevated button in a SizedBox widget with the same width to all "sizedboxes" to get the same width on all of the buttons.

SizedBox(width: 200, child: ElevatedButton(child: Text('Apple'), onPressed: () {})),
SizedBox(width: 200, child: ElevatedButton(child: Text('Orange'), onPressed: () {})),
SizedBox(width: 200, child: ElevatedButton(child: Text('Emu Apple fruit'), onPressed: () {}))

you can choose the width to be any number you'd want to set the width to.

user_164744110

try layoutBuilder, it detect the parent widget size and provides constraints that can be used by child.

hope you know the max width and can set the width using constrains doest this help?

import 'package:flutter/material.dart';

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

  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => 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: [
                        ConstrainedBox(
                          constraints: BoxConstraints(
                            minWidth: constraints.maxWidth,
                          ),
                          child: ElevatedButton(
                            onPressed: () {},
                            child: Text('Apple'),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {},
                          child: Container(
                            color: Colors.cyanAccent,
                            alignment: Alignment.center,
                            width: constraints.maxWidth *.6,
                            child: Text('Banana'),
                          ),
                        ),
                        ElevatedButton(
                          onPressed: () {},
                          child: Container(
                            alignment: Alignment.center,
                            width: constraints.maxWidth *.6,
                            child: Text('Chery'),
                          ),
                        ),
                        ElevatedButton(
                          onPressed: () {},
                          child: Text('Durian'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: Text('Emu apple fruit'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              Spacer(flex: 3),
            ],
          ),
        ),
      ),
    );
  }
}
user_101571270 
Widget build(BuildContext context) {
    double buttonWidth =100.0;
    double buttonHeight =20.0;
    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: Container(
                          width: buttonWidth,
                          height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Apple')
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                          width: buttonWidth,
                          height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Banana')
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                        width: buttonWidth,
                        height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Cherry')
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                          width: buttonWidth,
                          height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Durian')
                      ),
                    ),
                    ElevatedButton(
                      onPressed: () {
                      },
                      child: Container(
                          width: buttonWidth,
                          height: buttonHeight,
                        alignment: Alignment.center,
                        child: Text('Emu apple fruit')
                      ),
                    ),
                  ],
                ),
                ),
              ],
            ),
            Spacer(flex: 3),
          ],
        ),
      ),
    );

  }
user_162994280
Related