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: CrossAxisAlignm         


        

Answer 1

Thanks to Darky, I ended up using the LayoutBuilder, along with the Expanded Widget, the Column Widget, and the use of the flex parameter to give the right proportions. As for the text sizing, I couldn't find a better way than using some kind of ratio based on the available biggest height.

body: new Container(
            child: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
              new Expanded(
                  child: new MaterialButton(
                      child: new Column(
                        children: <Widget>[
                          new Expanded(
                            flex: 4,
                            child: new LayoutBuilder(
                                builder: (context, constraint) {
                              return new Icon(
                                Icons.timer,
                                size: constraint.biggest.height,
                              );
                            }),
                          ),
                          new Expanded(child:
                              new LayoutBuilder(builder: (context, constraint) {
                            return new Text('TIMER',
                                style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: constraint.biggest.height/30.0));
                          })),
                        ],
                      ),
                      onPressed: () {
                        showTimePicker(
                          context: context,
                          initialTime: new TimeOfDay.now(),
                        );
                      })),
              new Expanded(
                  child: new MaterialButton(
                      child: new Column(
                        children: <Widget>[
                          new Expanded(
                            flex: 4,
                            child: new LayoutBuilder(
                                builder: (context, constraint) {
                                  return new Icon(
                                    Icons.alarm,
                                    size: constraint.biggest.height,
                                  );
                                }),
                          ),
                          new Expanded(child:
                          new LayoutBuilder(builder: (context, constraint) {
                            return new Text('ALARM',
                                style: DefaultTextStyle.of(context).style.apply(fontSizeFactor: constraint.biggest.height/30.0));
                          })),
                        ],
                      ),
                      onPressed: () {
                        showTimePicker(
                          context: context,
                          initialTime: new TimeOfDay.now(),
                        );
                      })),
            ]))

Answer 2

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 3

As for the text sizing, I couldn't find a better way than using some kind of ratio based on the available biggest height.

I don't have the rights to comment yet, so I'll post it here : You can use the minimum between the biggest height and the biggest width.

It will do something similar to BoxFit.contain