[Flutter]ListTileの背景に画像を表示するには？

どうも、ちょげ(@chogetarou)です。

ListTileの背景に画像を表示する方法を紹介します。

方法

ListTileの背景に画像を表示するには、Containerを使います。

まず、ListTileをContainerでラップします。

次に、Containerの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「image」で画像の指定をします。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('Asset Path'),
    ),
  ),
  child: ListTile(
    title: Text('テキスト'),
  ),
);

Containerを使えば、ListTileの背景に画像を表示することが出来ます。

使用例

以下は、使用例です。

Container(
  height: 100,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('asset/images/background.jpg'),
      fit: BoxFit.fill,
    ),
  ),
  child: ListTile(
    title: Text(
      'タイトル',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

[Flutter]ListTileの高さを変えるには？

ListTileの高さを変える方法を紹介します。

www.choge-blog.com

2021.12.15

[Flutter]ListTileの左側に画像を表示するには？

ListTileの左側に画像を表示する方法を紹介します。

www.choge-blog.com

2021.12.15

[Flutter]ListTileのパディングを設定するには？

ListTileのパディングを設定する方法を紹介します。

www.choge-blog.com

2021.12.15

[Flutter]ListTileの下側にだけ枠線をつけるには？

ListTileの下側にだけ枠線をつける方法を紹介します。

www.choge-blog.com

2021.12.15