今回は「SizedBox」の基本的な使い方について紹介します。
SizedBoxを使えばchildのサイズを指定したり、空きスペースを作ったりできます!
目次
SizedBoxの基本プロパティ
width/height

weightプロパティで横幅、heightプロパティで高さを指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const SizedBox(
width: 200.0,
height: 300.0,
child: Card(
color: Colors.yellow,
child: Center(
child: Text('Hello World!'),
),
),
),
),
);
}
SizedBox.expand

SizedBox.expandを使えば「width: double.infinity」、「height: double.infinity」を使わなくても、SizedBoxの幅を親ウィジェットに合わせられます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter"),
),
body: const SizedBox.expand(
child: Card(
color: Colors.yellow,
child: Center(
child: Text('Hello World!'),
),
),
),
),
);
}
以上です。