Flutter – ListTile Widget
ListTile widget is used to populate a ListView in Flutter. It contains title as well as leading or trailing icons. Let’s understand this with the help of an example.
Constructor of ListTile class
ListTile({Key key,
Widget leading,
Widget title,
Widget subtitle,
Widget trailing,
bool isThreeLine: false,
bool dense,
VisualDensity visualDensity,
ShapeBorder shape,
EdgeInsetsGeometry contentPadding,
bool enabled: true,
GestureTapCallback onTap,
GestureLongPressCallback onLongPress,
MouseCursor mouseCursor,
bool selected: false,
Color focusColor,
Color hoverColor,
FocusNode focusNode,
bool autofocus: false})
Properties
- autofocus: This property takes in a boolean as the object to decide whether this widget will be selected on the initial focus or not.
- contentPadding: By taking EdgeInsetsGeometry as the object this property controls the padding.
- dense: This property decides whether the ListTile will be a part of a vertically dense list or not by taking in a boolean as the object.
- enable: This property controls whether the ListTile will be interactive or not by taking in a boolean as the object.
- focusColor: This property holds Color class as the object to control the color of the widget at the time of input focus.
- focusNode: This property provides an additional node.
- hoverColor: This property takes in Color class as the object to decide the color of the tile at the time of hover.
- isThreeLine: whether this list item should display three lines of text or not.
- leading: leading widget of the ListTile.
- mouseCursor: The mouseCursor property holds MouseCursor class as the object to decide the cursor for the mouse pointer at the time of pointer event.
- onLongPress: This holds GestureLongPressCallback typedef as the object
- onTap: function to be called when the list tile is pressed.
- selected: This property holds a boolean as the object. If set to true then the text and icon will be painted with the same color.
- selectedTileColor: This property controls the background color of the ListTile when it is selected.
- shape: the shape of the title’s InkWell.
- subtitle: additional content displayed below the title.
- titleColor: This property defines the background color of the ListTile when it is not selected, by taking in Color class as the object.
- tile: title to be given to ListTile widget.
- trailing: trailing widget of the ListTile.
- visualDensity. This property takes in VisualDensity class as the object. It defines the compactness in the layout of the ListTile.
Example:
The main.dart file.
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp( const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListTile' ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
debugShowCheckedModeBanner: false ,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String txt = '' ;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text( 'GeeksforGeeks' ),
backgroundColor: Colors.green,
),
backgroundColor: Colors.grey[100],
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.blue[50],
child: ListTile(
leading: const Icon(Icons.add),
title: const Text(
'GFG title' ,
textScaleFactor: 1.5,
),
trailing: const Icon(Icons.done),
subtitle: const Text( 'This is subtitle' ),
selected: true ,
onTap: () {
setState(() {
txt = 'List Tile pressed' ;
});
},
),
),
),
Text(
txt,
textScaleFactor: 2,
)
],
),
);
}
}
|
Output:
If the properties are defined as below:
const ListTile(
leading: Icon(Icons.add),
title: Text(
'GFG title',
textScaleFactor: 1.5,
),
trailing: Icon(Icons.done),
),
The following design changes can be observed:
If the properties are defined as below:
const ListTile(
leading: Icon(Icons.add),
title: Text(
'GFG title',
textScaleFactor: 1.5,
),
trailing: Icon(Icons.done),
subtitle: Text('This is subtitle'),
selected: true,
),
The following design changes can be observed:
If the properties are defined as below:
ListTile(
leading: const Icon(Icons.add),
title: const Text(
'GFG title',
textScaleFactor: 1.5,
),
trailing: const Icon(Icons.done),
subtitle: const Text('This is subtitle'),
selected: true,
onTap: () {
setState(() {
txt = 'List Tile pressed';
});
},
),
// when user tap the list tile then below output will be shown.
The following design changes can be observed:
Output explanation:
- Create a ListTile widget and wrap it with Container widget.
- After that, give ListTile a title, leading, trailing, onTap, etc.
- Add other widgets also like subtitle, selected, etc.
Last Updated :
14 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...