Skip to content

ListTile Button

FrenkyDema edited this page Aug 29, 2024 · 1 revision

The ListTile Button is a customizable widget that allows you to create interactive list tiles with a variety of configurable elements, including leading icons, titles, subtitles, and trailing widgets. It's ideal for use in lists, forms, or any other place where you need a button-like tile.


Constructor

ListTileButton({
  Key? key,
  Widget? leading,
  required Widget body,
  Widget? subtitle,
  Widget? trailing,
  void Function()? onPressed,
  EdgeInsetsGeometry? padding,
  double borderRadius,
  VisualDensity? visualDensity,
  Color? backgroundColor,
})

Properties

Property Type Description
leading Widget? The leading widget, usually an icon or avatar, displayed at the start of the tile.
body Widget The main content of the tile, typically a Text widget.
subtitle Widget? A secondary line of text or widget displayed below the body.
trailing Widget? The widget displayed at the end of the tile, often an icon or button.
onPressed void Function()? The callback function that gets triggered when the tile is tapped.
padding EdgeInsetsGeometry? Padding inside the tile, allowing you to adjust the spacing between the tile's content and its edges.
borderRadius double The border radius of the tile, which controls the roundness of the tile's corners.
visualDensity VisualDensity? Defines how compact the tile layout is, affecting the spacing between elements.
backgroundColor Color? The background color of the tile.

Usage Example

Here’s a basic example of how to use the ListTile Button in your Flutter app:

ListTileButton(
  leading: Icon(Icons.person),
  body: Text('John Doe'),
  subtitle: Text('Developer'),
  trailing: Icon(Icons.arrow_forward),
  onPressed: () {
    print('ListTile pressed!');
  },
);

Example with Custom Background

ListTileButton(
  leading: Icon(Icons.email),
  body: Text('Send Email'),
  backgroundColor: Colors.blue[50],
  onPressed: () {
    print('Email Tile pressed!');
  },
);

Customization Tips

  • Leading Widget: Use an icon, avatar, or any custom widget as the leading element to represent the content visually.
  • Trailing Widget: The trailing widget is often used for navigation indicators like arrows or status indicators like checkmarks.
  • Visual Density: Adjust the visualDensity property to make the tile more or less compact, depending on your design needs.
  • Border Radius: Customize the borderRadius to make the tile corners rounded for a softer look.

Common Use Cases

  • Profile List: Use the ListTile Button to create a list of user profiles with avatars and names.
  • Settings Menu: Perfect for creating a settings menu where each option is represented as a tappable tile.
  • Navigation: Use in side drawers or navigation panels to represent different sections or screens of the app.