プログラミングスクール最大70%OFF! ←クリックして見に行く

【Flutter】Widget of the Week #10 Table

【Flutter】Widget of the Week #10 Table

Googleさん公式Youtube「Widget of the Week」で紹介されている、
ウィジェットのサンプル集第10弾は Table です!

Table ってなに?

様々なサイズのグリッド(枠線のある表)を表現してくれるウィジェットです\_(・ω・`)ココ重要!
Grid ウィジェットと違うのはスクロールしないところ!

・Table
今回紹介するTable(テーブル)はスクロールできません!

・Grid
スクロールできるタイル的な画面なのがGrid(グリッド)です!
instagramとかこのタイプですね!

Point

SliverList & SliverGrid については#12で紹介予定です!

公式からの説明は以下の通り。

Table はスクロールする必要がないウィジェットのグリッドを作成するのに使えますが、特にウィジェットのサイズが様々な場合に最適です。ネストされた行列は少々面倒になりがちですが、この Table ウィジェットが一貫して子ウィジェットのサイズ変更をしてくれます。お試しください!

公式Youtubeより引用

公式の動画で概要を把握

まずは1分程度の公式の動画「Widget of the Week」で概要を把握しましょう!

概要をなんとなく把握できたところで、
早速サンプルコードを見ていきましょう(∩’-‘⊂)シュッ

Sample Code

コピペで動くサンプルコードの紹介です!

Table

スタンダードなTable(テーブル)のサンプルコードです!

・構造をざっくり解説!!
Tableウィジェットの中に2つのTableRow()があり、
1つ目のTableRow()が1行目、2つ目のTableRow()が2行目となります!

そして、TableRow()の中のchildren:[]内に列ごとのウィジェットを設置しています!

Properties

主要そうなプロパティを抜粋してご紹介( *˙ω˙*)و グッ!

プロパティ名 機能
columnWidths: { 0: FractionColumnWidth(.5) } 1列目(0が1行目)の横幅が全体の50%(.5)と設定してます
・サンプルコードでは全てのサイズを指定していますが、1箇所のみ指定でもOK!
・複数列指定する場合は最後は指定しなくてもOKですが、今回はわかりやすく明示的に指定してます。
border: TableBorder.all(width: 2.0, color: Colors.green,) Table全体をボーダーで囲う線の設定
TableBorder.all()だけの場合、シンプルな黒枠線になりますが、今回のコードではwidth:で枠線の太さ、color:で線の色を設定しています。
参考:TableBorder.all
textDirection: 列はデフォルトで左から右に順に表示されますが、表示順を右から左にすることが可能。(あんまり使わなそう)
TextDirection.rtl, //右から左に
TextDirection.ltr, //左から右に(※デフォルト)
TableRow() テーブルの行を管理するWidgetで、
この中のchildren:[]内に列のWidgetを配置します。
decoration: BoxDecoration() TableRowの配下に設置することで、行の背景色を設定できます。
今回はcolor: Colors.lightBlueAccentでライトブルーに設定しています!
※列毎の背景色を個別で設定する場合はContainer()を使います。
参考:BoxDecoration classColors class

もっと詳しく知りたい方は 公式ドキュメントをご参考に!

あとがき

お疲れ様でした!
これであなたもテーブルマスターですね(∩’-‘⊂)シュッ

次回は SliverAppBar の紹介です!
それでは次の記事で会いましょう!

Flutterカテゴリの最新記事