How to make square raised buttons in Flutter?

Question

I've got a whole bunch of RaisedButtons 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:

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

Solution 2

Try AspectRatio

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

Comments

[naiveai]

Is it not true that the number of buttons that can fit will change because of screen size? Though I suppose then dynamically calculating it with width and height could work. Fair enough, thanks!

[somebody4]

I got "This RenderAspectRatio was given an aspect ratio of 1.0 but was given both unbounded width and unbounded height constraints. Because both constraints were unbounded, this render object doesn't know how much size to consume."

[呂學洲]

You can wrapped it by SizedBox for fixed sizes or Expanded for flexed size. The main idea here is make each widget do their own things. In this case, AspectRatio will keep the ratio of widget not their bounds.