技術記事

micomia株式会社の井上です。今回はListTileについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. ListTileとは？

ListTileとは、リストの中の1行を簡単に作成できるものです。

例えば、設定画面やプロフィール画面など左にアイコン、中央にタイトル、右に矢印アイコンといった構成をよく見かけると思います。RowやColumnを組み合わせて1から作ることもできますがListTileだとそれらをより簡単に作ることができます。

2. どんな時にListTileを使うのか

ListTileは、全ての行に共通した構造を持つリストを作りたい時に便利なWidgetになっています。

例えば、このようなマイページのUIを作りたい場合、非常に便利です。

普段使っているアプリでもよく見かけるであろう、左側にアイコン、中央にタイトル、右側に矢印アイコンの構造です。

3. ListTileの実装方法

WidgetとしてListTileを選択します。

すると、このように追加されました。

デフォルトの状態だと、タイトルの下にサブタイトルも表示されています。サブタイトルを入れたい方はこのままで構いませんが、今回はマイページの項目を作りたいのでサブタイトルは不要です。

このサブタイトルは、右側のプロパティパネルにあるSubtitleで削除できます。

TextのところにSubtitleと入力されているのでこの部分を消すことでサブタイトルを非表示にできます。

サブタイトルを削除すると、自動的にListTileの縦幅が調整されますが、もう少し広くしたい場合の設定方法は次の項目でご紹介します。

また、応用としてListTileをListViewでWrapしてデータベースに入っている情報を表示させることもできます。

これは、メニューを表示させるときなど同じ要素を繰り返し表示させたいけど内容は変えたいというような場合に活用できる機能です。

ListViewの扱いは少し難易度が上がるので詳しく知りたい方は以下の記事をぜひご覧ください。

FlutterFlowのListViewはどう使う？｜使い方など徹底解説

4. ListTileの詳細設定

ここからは右側のプロパティパネルにある詳細な設定を見ていきます。

まず、Slidable Propertiesです。これは簡単にいうとListTileをスライド可にする機能です。少し複雑なのでこちらは次回の記事で詳しくご紹介します。

次に、Style Propertiesです。

上部にあるColorはこのようにListTile全体のカラーを変えることができます。

その下にあるContent Paddingは先ほど言っていたListTileの縦幅(と横幅)を調節することができます。試しに、上下に5ずつPaddingを入れてみると、

このように、少し余裕が生まれました。左右の余白ももちろんここで調節できます。

次に、Titleです。ここは中央に表示されるタイトルに関する調整をすることができます。

例として、投稿履歴といれてみると、

このようになりました。今の状態でも問題はないですが、テキストサイズやカラーを変えたい場合はその下にある部分で変更することができます。今回は、Font FamilyをNoto Sans JPに、Font Sizeを18に変更してみます。

こうすることで少し見やすくなった気がします。Subtitleの方は先ほど軽く紹介したのでここでは省略しますが、Textと同じように調節することができます。

最後に、一番下にあるLeading IconとTrailing Iconです。

この二つは簡単に言うと、Leading Icon=左端のアイコン Trailing Icon=右端のアイコン です。Leading Iconはデフォルトの状態だとNoneになっているので表示されていません。今回は投稿履歴というListTileを作っているのでそれらしいアイコンを追加してみます。

このようにアイコンを追加できました。Icon SizeとIcon ColorはTextと同じようにサイズ、カラーを変更できるのでお好みのカラーに変更してください。

Trailing IconはデフォルトでArrow Forward Ios Roundedというアイコンがセットされていますが、こちらもお好みで変更できます。

基本的にこの部分には矢印を表示させたい人が多いかと思いますが、矢印は「arrow」と入力するとたくさんのアイコンが表示されます。今回はarrow_forwardに変更してみます。

このように表示させることができました。同じように他の項目も並べたい時は今作ったListTileを複製していくことで簡単に実装できます。

5. さいごに

今回はListTileについて解説していきました。ListTileはRowやColumnで代替可能ではありますが、アプリ実装においてはいかに効率よく実装するかも大切なポイントになってくるのでListTileを使用して開発効率を高めていきましょう。

本記事内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら