【Flutter】ListTileに枠線を追加する方法

この記事はで読むことができます。

はじめに

Flutterを使ってアプリを開発していると、リスト表示が頻繁に必要になります。その中でも、ListTileは一般的に使用されるウィジェットの1つで、情報をリスト形式で表示するのに便利です。しかし、時にはListTileに枠線を追加したいことがあります。この記事では、FlutterでListTileに枠線を追加する方法とその注意点について詳しく説明します。

この記事でわかること

ListTileに枠線を追加する基本的な方法

方法1: Containerを使用する

ListTileに枠線を追加する最も基本的な方法は、Containerウィジェットを使用することです。ContainerのdecorationプロパティにBoxDecorationを設定し、枠線（ボーダー）を描画します。

実装例

Dart

 Container(
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.black,  // 枠線の色
        width: 1.0,          // 枠線の幅
      ),
    ),
    child: ListTile(
      tileColor: Colors.black12,
      title: Text('ListTile with Border'),
    ),
  )

Containerを利用することで、枠線を簡単に追加でき、カスタマイズも容易です。

実行結果

方法2: Cardを使用する

Cardウィジェットを利用することで、ListTileに枠線や影を簡単に追加できます。Cardはマテリアルデザインに基づいたUIコンポーネントであり、リスト項目に視覚的な区切りや強調効果を加える際に便利です。

実装例

Dart

ListTile(
  title: Card(
    elevation: 2.0, // カードの影の強さ
    shape: RoundedRectangleBorder(
      side: BorderSide(
        color: Colors.black, // 枠線の色
        width: 1.0,          // 枠線の幅
      ),
      borderRadius: BorderRadius.circular(8.0), // 角丸の設定
    ),
    child: ListTile(
      title: Text('ListTile with Card Border'),
    ),
  ),
)

Cardを使うと、枠線や影を直感的に追加でき、デザイン性の高いリスト項目を実現します。

実行結果

方法3: ListTileのshapeプロパティをカスタマイズする

ListTile ウィジェット自体の shape プロパティをカスタマイズすることで、直接枠線や角丸を追加することができます。追加のラッパーウィジェット（Container や Card）を使用せずに実装できるため、シンプルなコードで枠線付きのリスト項目を作成できます。

実装例

Dart

ListTile(
  title: Text('Custom Bordered ListTile'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(
      Radius.circular(4.0), // 枠線の角丸の半径
    ),
    side: BorderSide(
      color: Colors.black, // 枠線の色
      width: 1.0,          // 枠線の幅
    ),
  ),
)

RoundedRectangleBorder を利用することで、枠線の色、幅、角丸の度合いを柔軟にカスタマイズできます。

実行結果