Flutter / layouts / List Tile
List Tile
-
Usage
Flutter Row widget is used to display its widgets in a horizontal array.
1. Here is the minimal code to display ListTile inside the ListView widget:
ListView( children: const [ ListTile( leading: Icon(Icons.car_rental), title: Text('Car'), trailing: Icon(Icons.more_vert), ), ListTile( leading: Icon(Icons.flight), title: Text('Flight'), trailing: Icon(Icons.more_vert), ), ListTile( leading: Icon(Icons.train), title: Text('Train'), trailing: Icon(Icons.more_vert), ) ], ) Here’s how the code is translated into the design:
show the data inside the ListTile
final List items = List .generate(10000, (i) => '$i'); ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListTile( leading: CircleAvatar( backgroundColor: const Color(0xff764abc), child: Text(items[index]), ), title: Text('Item ${items[index]}'), subtitle: Text('Item description'), trailing: Icon(Icons.more_vert), ); }, ) output
Adding a divider
ListView( children: ListTile.divideTiles(context: context, tiles: [ ListTile( leading: Icon(Icons.car_rental), title: Text('Car'), ), ListTile( leading: Icon(Icons.flight), title: Text('Flight'), ), ListTile( leading: Icon(Icons.train), title: Text('Train'), ), ]).toList(), )