title: How to make square raised buttons in Flutter?
body: <p>I've got a whole bunch of <code>RaisedButton</code>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 <code>Wrap</code> with a <code>GridView.count</code> and using the <code>crossAxisCount</code>, 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? </p>
  
  <p>Here's the current code and what it produces:</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Wrap(
          direction: Axis.horizontal,
          children: &lt;Widget&gt;[
            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),
            ),
          ],
        ),
      );
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/HrOvf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HrOvfm.png" alt="Current result"></a></p>
  
  <p>Replacing with a GridView with 2 as the <code>crossAxisCount</code> 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):</p>
  
  <p><a href="https://i.stack.imgur.com/ByKdS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ByKdSm.png" alt="Gridview almost there"></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/fQDsE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fQDsEm.png" alt="GridView bad"></a></p>