Flutter　CircleAvatarを使ってListTileの左側に画像を表示するサンプル

2023年10月1日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
leading: CircleAvatar(
backgroundImage: AssetImage(xxx’),
),
CircleAvatarの引数「backgroundImage」に画像を指定します。
画像の指定は「AssetImage」を設定します。

操作例

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (context, idx) {
          return ListTile(
            leading: CircleAvatar(
              backgroundImage: AssetImage('asset/images/test.jpg'),
            ),
            title: Text('test ${idx + 1}'),
          );
        },
        itemCount: 3,
      ),
    ),
  );
}