ListTile
A single fixed-height row that typically contains some text as well as a leading or trailing icon.
Properties
- autofocus
- contentPadding
- dense
- enable
- focusColor
- focusNode
- hoverColor
- isThreeLine
- leading
- mouseCursor
- onLongPress
- onTap
- selected
- selectedTileColor
- shape
- subtitle
- titleColor
- tile
- trailing
- visualDensity
Example 1:
import 'package:flutter/material.dart';
void main() => DemoApp();
class DemoApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoAppState();
}
}
class DemoAppState extends State<DemoApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Demo App"),
),
body: ListView(
children: const [
ListTile(
title: Text('Demo Text'),
subtitle: Text('Demo subtitle'),
leading: Icon(Icons.person),
trailing: Icon(Icons.star),
contentPadding: EdgeInsets.all(30),
)
],
),
),
);
}
}
Example 2:
ListView(
children: const [
ListTile(
title: Text('Demo Text'),
subtitle: Text('Demo subtitle'),
leading: Icon(Icons.person),
trailing: Icon(Icons.star),
),
ListTile(
title: Text('Demo Text'),
subtitle: Text('Demo subtitle'),
leading: Icon(Icons.person),
trailing: Icon(Icons.star),
selected: true,
selectedTileColor: Colors.cyanAccent,
),
],
),
Example 3:
ListTile(
title: Text('Demo Text'),
subtitle: Text('Demo subtitle'),
leading: Icon(Icons.person),
trailing: Icon(Icons.star),
onTap: () {},
onLongPress: () {},
dense: true,
),
Example 4:
ListTile(
title: Text('Demo Text'),
subtitle: Text('Demo \n Demo \n Demo'),
leading: Icon(Icons.person),
trailing: Icon(Icons.star),
onTap: () {},
onLongPress: () {},
dense: true,
isThreeLine: true,
),
Example 5:
ListTile(
title: Text('Demo Text'),
subtitle: Text('Demo \n Demo \n Demo'),
leading: Icon(Icons.person),
trailing: Icon(Icons.star),
onTap: () {},
onLongPress: () {},
dense: true,
tileColor: Colors.brown,
),
Example 6:
ListView(
children: ListTile.divideTiles(context: context, tiles: [
const ListTile(
title: Text('Tile 1'),
leading: Icon(Icons.person),
),
const ListTile(
title: Text('Tile 1'),
leading: Icon(Icons.person),
),
const ListTile(
title: Text('Tile 1'),
leading: Icon(Icons.person),
),
const ListTile(
title: Text('Tile 1'),
leading: Icon(Icons.person),
),
const ListTile(
title: Text('Tile 1'),
leading: Icon(Icons.person),
),
]).toList(),
),
Video Link: