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 class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is //the root of your application. @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListTile' ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
debugShowCheckedModeBanner: false ,
);
}
} // Class class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_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.