Flutter ListTile Widget (original) (raw)

Last Updated : 28 Aug, 2024

**The ListTile widget is used to populate a ListView in Flutter. It contains a _title as well as _leading or _trailing icons. Let's understand this with the help of an example.

**The Constructor of the 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

Description
**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 of ListTitle Widget

The main.dart file.

main.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 { 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: [ 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:

listtile widget

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:

listtile with text

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: