現時点では、次のコードを使用しています。
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,
)
])));
ただし、アイコンのサイズを 100.0 に、MaterialButton の高さを 120.0 に「ハードコード」する必要がありました。
MaterialButton ができるだけ多くのスペース (それぞれ画面の 50%) を占めるようにし、アイコンがそのスペースに「うまく収まる」ようにし、理想的にはテキストのスケーリングもそれに合わせて調整されるようにしたいと思います。
Flutter でそれを実行する方法はまだ見つかっていません。これを実行するのが良い考えではない場合 (どのデバイスでも画面のスペース全体を使用したい)、その理由を教えてください。
ベストアンサー1
LayoutBuilder を使用すると、ビルド中に親のサイズを動的に取得できます。
実際の例:
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);
}),
);
}
}