Skip to main content

List Tile

The List Tile widget is a versatile component used in Flutter to display a row in a list or other structures. It's designed to present multiple pieces of information in a well-organized manner. Here’s a breakdown of its properties:

Properties:​

  • Leading: Widget placed at the beginning of the List Tile. Commonly used for icons or images that represent the list item.

  • Title: The primary content of the List Tile. Typically a text widget that displays the main piece of information.

  • Subtitle: Additional content displayed below the title. Provides further details or secondary information.

  • Trailing: Widget placed at the end of the List Tile. Often used for action icons or additional information.

  • isThreeLine: If set to true, the subtitle will be displayed as two lines, and the List Tile will be taller to accommodate three lines in total.

  • Dense: Makes the list tile more compact, reducing the height and the font sizes.

  • Shape: Defines the shape of the List Tile. Used to apply a border or a rounded rectangle shape to the tile.

  • Selected Color: The color displayed when the List Tile is selected.

  • Icon Color: The color of the icons within the List Tile, typically applied to the leading and trailing icons.

  • Text Color: Sets the color of the text inside the List Tile, usually applied to the title and subtitle.

  • Title TextStyle: Custom text style for the title.

  • Subtitle TextStyle: Custom text style for the subtitle.

  • Leading and Trailing TextStyle: Defines the text style for the text within the leading and trailing widgets.

  • Content Padding: The padding around the List Tile's content.

  • Enabled: If false, disables the tile and prevents it from reacting to touch.

  • OnTap/OnLongPress/OnFocusChange: Set different user interactions with circuit.

  • Selected: If true, the List Tile appears selected, changing its color to the selected color.

  • Focus Color: The color of the List Tile when it has keyboard focus.

  • Hover Color: The color of the List Tile when a pointer is hovering over it.

  • Splash Color: The color of the ink splash introduced by tapping the List Tile.

  • Autofocus: If true, the List Tile will be focused automatically when initiated.

  • Tile Color: The background color of the List Tile.

  • Selected Tile Color: The background color of the List Tile when it is selected.

  • Enable Feedback: Whether the List Tile should provide feedback on interaction (like a ripple effect).

  • Horizontal Title Gap: The horizontal gap between the titles and the leading/trailing widgets.

  • Min Vertical Padding: The minimum vertical padding between the contents of the List Tile.

  • Min Leading Width: The minimum width of the leading widget, ensuring it has adequate space.

By configuring these properties, developers can create a List Tile that fits perfectly within the visual and functional requirements of their app, making lists not only more informative but also more interactive.