🐷

[Flutter]Table

2022/11/02に公開

Flutter

tech

https://youtu.be/_lbE0wsVZSw

Table

スクロールの必要がないウィジェットのグリットを作成するために使用
サイズのためのビルドが必要なくなる
子ウィジェットのサイズ変更は、Table が一貫して行う

Table(
 children: [
  TableRow(children: [
   WideWidget(),
   MediumWidget(),
   MediumWidget(),
  ]),
  TableRow(children: [
   MediumWidget(),
   NarroWidget(),
   MediumWidget(),
  ]),
 ],
);

縦方向の位置の指定
defaultVerticalAlignment: TableCellVerticalAlignment.top
.middle
.bottom
横方向の列の相対幅を指定
defaultColumnWidget: FlexColumnWidget(1.0)
: FractionColumnWidget(.25)
: FixedColumnWidth(30.0)

個々の列に対して、columnwidthsの引数に渡すことで特定の設定を変えることもできる

Table(
columnWidths: {1: FractionColmnWidth(.2)},
 children: [
  TableRow(children: [
   WideWidget(),
   MediumWidget(),
   MediumWidget(),
  ]),
  TableRow(children: [
   MediumWidget(),
   NarroWidget(),
   MediumWidget(),
  ]),
 ],
);

borderの引数を使うと、Table周りに枠線を追加することもできる

Table(
border: TableBorder.all(),
 children: [
  TableRow(children: [
   WideWidget(),
   MediumWidget(),
   MediumWidget(),
  ]),
  TableRow(children: [
   MediumWidget(),
   NarroWidget(),
   MediumWidget(),
  ]),
 ],
);

Table

Discussion