【Flutter】ListTileの右側にアイコンを表示する方法

未経験から最短3カ月でプログラマーへ！！【０円スクール】

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次 閉じる

• はじめに
• まとめ

はじめに

Flutterを使用したアプリケーションで、リストアイテムの右側にアイコンを表示することは一般的な要件です。この記事では、初心者向けにListTileウィジェットの右側にアイコンを追加する3つの方法について解説します。

最初の方法は、ListTileの引数 “trailing” を使用して右側にアイコンを追加する方法です。

ListTile(
  trailing: Icon(Icons.arrow_forward), // アイコンを指定
  title: Text('アイテム1'),
)

次の方法は、SizedBoxウィジェットを使用してリストアイテムの右側にアイコンを追加する方法です。

ListTile(
  title: Text('アイテム2'),
  trailing: SizedBox(
    width: 32, // アイコンの幅を指定
    child: Icon(Icons.star), // アイコンを指定
  ),
)

最後の方法は、Rowウィジェットを使用してリストアイテム内でアイコンを配置する方法です。

ListTile(
  title: Row(
    children: [
      Text('アイテム3'),
      Spacer(), // アイコンの前にスペースを追加
      Icon(Icons.check),
    ],
  ),
)

FlutterでListTileの右側にアイコンを表示する3つの方法を紹介しました。これらの方法を活用することで、リストアイテムの外観をカスタマイズし、ユーザーエクスペリエンスを向上させることができます。プロジェクトの要件に合わせて適切な方法を選択し、アプリケーションをカスタマイズしましょう。