How to automatically size Icons in Flutter to be as big as possible

Question

At the moment, I am using the following bit of code :

   body: new Container(             child: new Column(                 crossAxisAlignment: CrossAxisAlignment.stretch,                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,                 children: <Widget>[               new MaterialButton(                 height: 120.0,                 child: new Column(                   children: <Widget>[                     new Icon(                       Icons.av_timer,                       size: 100.0,                     ),                     new Text('TIMER'),                   ],                 ),                 onPressed: null,               ),               new MaterialButton(                 height: 120.0,                 child: new Column(                   children: <Widget>[                     new Icon(Icons.alarm_add, size: 100.0),                     new Text('ALARM'),                   ],                 ),                 onPressed: null,               )             ]))); 

However, I have had to "hardcode" the Icon size to 100.0 and the height of the MaterialButton to 120.0.

I would like the MaterialButton to take as much space as possible (50% of the screen for each), and I would like the Icons to "fit nicely" in that space, ideally along with the Text scaling as well.

I haven't found the way to do that in Flutter yet. If it's not a good idea to try to do this (I would like it to use the entire space of the screen on any device) please let me know why ?

Answer 1

You can use LayoutBuilder to dynamically get the parent size during build.

A working example :

void main() {   runApp(new MaterialApp(     home: new TestIcon(),   )); }  class TestIcon extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new Container(       color: Colors.white,       child: new LayoutBuilder(builder: (context, constraint) {         return new Icon(Icons.access_alarms, size: constraint.biggest.height);       }),     );   } } 

Answer 2

Screenshot:

---

Use FittedBox:

SizedBox.fromSize(   size: Size.fromRadius(200),   child: FittedBox(     child: Icon(Icons.add),   ), )