Flexible 、 Expanded 、 Spacer ウィジェットは、 Column 、 Row ウィジェットの子ウィジェットとして扱えるレイアウトウィジェットで、比率によって、子ウィジェットを埋める役割を補います。
Flexible ウィジェットは、可変な領域を設定する場合に利用します。
Expanded ウィジェットは、固定な領域を設定する場合に利用します。
また、 Flexible の引数 fit に FlexFit.tight 設定した場合と同じ内容になります。
Spacer ウィジェットは、固定の空白エリアを作ります。
各ウィジェットは、引数 flex に従い、比率を決定します。
SafeArea(
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.grey,
child: Column(
children: [
Expanded(
flex: 5,
child: Container(
padding: const EdgeInsets.all(15),
width: double.infinity,
color: Colors.blue,
child: Container(
color: Colors.blueGrey,
child: const Center(
child: Text('Top Title'),
),
),
),
),
const Spacer(
flex: 5,
),
Flexible(
flex: 10,
child: Container(
padding: const EdgeInsets.all(15),
width: double.infinity,
color: Colors.green,
child: Row(
children: [
Expanded(
flex: 10,
child: Container(
color: Colors.lightGreen,
child: const Center(
child: Text('Row1-1'),
),
),
),
const Flexible(
flex: 20,
child: ColoredBox(color: Colors.black),
),
Expanded(
flex: 10,
child: Container(
color: Colors.red,
child: const Center(
child: Text('Row1-2'),
),
),
),
],
),
),
),
Flexible(
flex: 8,
child: Container(
padding: const EdgeInsets.all(15),
width: double.infinity,
color: Colors.purple,
child: Row(
children: [
Expanded(
flex: 10,
child: Container(
color: Colors.yellow,
child: const Center(
child: Text('Row2-1'),
),
),
),
const Flexible(
flex: 20,
child: ColoredBox(
color: Colors.pink,
child: Center(
child: Text('Row2-2'),
),
),
),
Expanded(
flex: 10,
child: Container(
color: Colors.orange,
child: const Center(
child: Text('Row2-3'),
),
),
),
],
),
),
),
],
),
),
),
コード例だと、 Column ウィジェットを使用