How to make square raised buttons in Flutter?

Question

I've got a whole bunch of RaisedButton s in a Wrap, so that they can take up as many rows as they need. But I do want to expand the buttons into square buttons. I can do that by replacing the Wrap with a GridView.count and using the crossAxisCount , but then when more real estate is available, the buttons become unnecessarily large. Basically, I want them all to be squares of the same size, all only as large as the content they hold. They're not dynamically loaded or anything, so there's no concerns about performance. But we are looking at the possibility of fairly small screens, so scrolling needs to be possible as well. Is there a way to get all these things right?

Here's the current code and what it produces:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Wrap(
        direction: Axis.horizontal,
        children: <Widget>[
          RaisedButton.icon(
            onPressed: () {}
            label: Text('Park In', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.add),
          ),
          RaisedButton.icon(
            onPressed: () {}
            label: Text('Park Out', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.eject),
          ),
          RaisedButton.icon(
            onPressed: () {}
            label: Text('Maintainence In', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.vertical_align_bottom),
          ),
          RaisedButton.icon(
            onPressed: () {}
            label: Text('Maintainence Out', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.vertical_align_top),
          ),
          RaisedButton.icon(
            onPressed: null,
            label: Text('Move', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.open_with),
          ),
        ],
      ),
    );
  }

Replacing with a GridView with 2 as the crossAxisCount gives this, which is very close to what I need (ideally the text would be bigger and wrap - it seems to overflow if not given the right space, but I suppose I can deal with that when it comes to that):

But then when I go to, for example, landscape mode, where easily 3 buttons can fit in one row, the GridView just goes "eh, whatever" and makes the buttons enormous:

Answer 1

You could use an OrientationBuilder for that. It will take care of orientation changes for you:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("word"),
    ),
    body: OrientationBuilder(
      builder: (context, orientation) {
        int count = 2;
        if(orientation == Orientation.landscape){
          count = 3;
        }
        return GridView.count(
          crossAxisCount: count,
          children: <Widget>[
            RaisedButton.icon(
              onPressed: () {},
              label: Text('Park In', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.add),
            ),
            RaisedButton.icon(
              onPressed: () {},
              label: Text('Park Out', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.eject),
            ),
            RaisedButton.icon(
              onPressed: () {},
              label:
                  Text('Maintainence In', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.vertical_align_bottom),
            ),
            RaisedButton.icon(
              onPressed: () {},
              label:
                  Text('Maintainence Out', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.vertical_align_top),
            ),
            RaisedButton.icon(
              onPressed: null,
              label: Text('Move', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.open_with),
            ),
          ],
        );
      },
    ),
  );
}

Answer 2

Try AspectRatio

AspectRatio(
  aspectRatio: 1,
  child: RaisedButton(
    onPressed: () {},
    child: Text('hi'),
  ),
);

Answer 3

As of now flutter 3.3.10 Raised Button is not supported. But you can use other buttons like TextButton, To achieve this you just need to wrap it inside AspectRatio widget

Like in previous example

AspectRatio(
  aspectRatio: 1,
  child: TextButton(
    onPressed: () {},
    child: Text('hi'),
  ),
);

Do not put the AspectRatio widget within unbounded height or width widgets to avoid rendering errors.