【Widget of the Week】#10 Table

【#10 Table】動画

【#10 Table】概要

スクロールするグリッドレイアウトの画面はGridViewで実装できる!

スクロールしないグリッドレイアウトの画面はTableを使おう!

Tableの特徴

【#10 Table】解説

①スクロールするグリッドレイアウトの画面はGridViewで実装できる!

Flutterではスクロール可能なグリッドレイアウトの画面をGridViewウィジェットを使用することで実装できます。

ただ、いつもスクロールが必要なわけではないですよね。

グリッドレイアウトだけど画面は固定したい時はどうしたら良いのでしょう?

※GridViewについて詳しく知りたい方はこちらをご覧ください(公式ドキュメント)

②スクロールしないグリッドレイアウトの画面はTableを使おう!

Tableウィジェットを使用することでスクロールしないグリッドレイアウトの画面を作ることができます。

Tableウィジェットの特徴を次項で解説していきたいと思います。

③Tableの特徴

  1. ColumnやRowを使うよりも綺麗に書ける!

TableをパッとみてColumとRowを組み合わせれば作れるじゃんと感じていた方もいると思います。

確かにTableを使わなくてもグリッドレイアウトの画面は作れるのですが、上記画像のようにネストが深くなり、可読性の低いコードになってしまいます。

一方でTableを使用したコードはすっきりと見やすく、何のウィジェットが並んでいるのかが一目でわかります。

このように整ったコードは保守性も高めるのでとても重要です。

2. Tableが子ウィジェットのレイアウトを設定してくれる!

Tableの便利なところはグリッドレイアウトを簡単に作れるだけではありません。

グリッド内に表示しているウィジェットのレイアウトも設定することができます。

これをColumnとRowで作っていたとすると別々にレイアウトの設定をしなくてはいけないため、手間もかかり、コードはさらに読みにくくなってしまいます。

Tableには他にも便利な機能があるのでサンプルコードで紹介していきたいと思います。

【#10 Table】サンプルコード① (基本的なプロパティ)

children

型:List<TableRow>
グリッドレイアウトで表示するウィジェットをリスト形式で設定できる。
型がTableRowになっているので 注意。
行(TableRow)のウィジェットを縦に並べていくイメージでTableを作る。

border

型:TableBorder
ボーターラインの設定をすることができる。

defaultColumnWidth

型:TableColumnWidth
列全体の幅を設定することができる。

defaultVerticalAlignment

型:TableCellVerticalAlignment
行の中に表示されているウィジェットの表示位置を設定することができる。

columnWidths

型:Map<int, TableColumnWidth>
Table内に表示されているウィジェットの幅を個別に設定することができる。

TableColumnWidthに設定するクラスの紹介
・IntrinsicColumnWidth → 子ウィジェットの横幅に合わせて表示
・FlexColumnWidth → 表示する幅の比を指定することができる
・FixedColumnWidth → 幅を固定で表示できる

※ Tableの詳細はこちら(公式ドキュメント)

defaultColumnWidth

See the Pen
Table1
by RyomaArisawa (@ryoma-arisawa)
on CodePen.

defaultVerticalAlignment

See the Pen
Table2
by RyomaArisawa (@ryoma-arisawa)
on CodePen.

columnWidths

See the Pen
Table3
by RyomaArisawa (@ryoma-arisawa)
on CodePen.

投稿者プロフィール

ArisawaRyoma
社会人歴2年目の駆け出しエンジニアです。

学生の時はがっつり文系(=遊んだただけ)でほぼPCに触れずに生きてきたので、プログラミングは日々勉強中。Vue / React / Django / Springなど色々浮気して今はFlutterにハマってます。

趣味は海外旅行、釣り、卓球など。

Twitterでも色々発信してるので良ければフォローお願いします。

関連記事

  1. flutter

    【Flutter】APIからデータを取得し画面に表示(Flutter,…

  2. flutter

    【Flutter】PlatformviewとWebViewを使い、ネイ…

  3. flutter

    【Flutter】Firebase Dynamic Linksを使う

  4. flutter

    【Flutter】KotlinでNative側を実装しFlutterと…

  5. flutter

    【Flutter】Demoプロジェクトの値の状態を管理(Flutter…

  6. flutter

    【Flutter】2回目以降のリリース,Android,iOS

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS
  8. AWS

制作実績一覧

  1. Checkeys