🐈

[Flutter]ListTileのtrailingに複数のアイコンを表示する方法

2022/08/11に公開

ListTileのtrailingに複数のアイコンを表示させようとする時、Rowを使用してもエラーになる。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
        home: Scaffold(
        appBar: AppBar(
          title: Text('Task List'),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              title: Text("Task Title"),
	      // Rowを使用するとエラーになる
              trailing: Row(
                children: [
                  Icon(Icons.favorite_border),
                  Icon(Icons.visibility),
                ],
              )
            )
          ]
        ),
      )
    );
  }
}

Wrapを使用することで複数のアイコンを表示させることができました!

ListTile(
  title: Text("Task Title"),
  trailing: Wrap(
    spacing: 8, // アイコンの間の幅を調整
    children: [
      Icon(Icons.favorite_border),
      Icon(Icons.visibility),
    ],
  )
)

参考記事:https://stackoverflow.com/questions/54548853/placing-two-trailing-icons-in-listtile

Discussion