apptomate_custom_list_tile 0.0.3

An enhanced ListTile widget with extensive customization options for building beautiful list items with interactive elements.

CustomListTile

An enhanced ListTile widget with extensive customization options for building beautiful list items with interactive elements.

Features

• Visual Customization:

  • Custom background colors/gradients
  • Adjustable elevation and shadows
  • Flexible border radius
  • Custom text styling
  • Optional borders

• Layout Control:

  • Adjustable dimensions
  • Custom padding
  • Leading/trailing widget sizing
  • Horizontal title gaps
  • Vertical spacing

• Interactive Elements:

  • Tap/long-press handlers
  • Hover/focus/splash effects
  • Enabled/disabled states

• Content Flexibility:

  • Text or widget subtitles
  • Custom leading/trailing widgets
  • Dense mode for compact layouts

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_list_tile: ^0.0.3

Basic Usage

CustomListTile(
  title: 'Basic Tile',
  subtitle: 'Simple example',
  leading: Icon(Icons.home),
  onTap: () => print('Tile tapped'),
)

Complete Examples

1. Profile Tile

CustomListTile(
  title: 'John Doe',
  subtitle: 'Software Developer',
  leading: CircleAvatar(
    backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
  ),
  trailing: Icon(Icons.chevron_right),
  elevation: 6,
  borderRadius: 12,
  backgroundColor: Colors.white,
  onTap: () => navigateToProfile(),
)

2. Gradient Tile with Custom Shadow

CustomListTile(
  title: 'Premium Feature',
  subtitleWidget: Row(
    children: [
      Icon(Icons.star, color: Colors.amber, size: 16),
      SizedBox(width: 4),
      Text('Exclusive Content'),
    ],
  ),
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.deepPurple],
  ),
  customShadows: [
    BoxShadow(
      color: Colors.purple.withOpacity(0.3),
      blurRadius: 10,
      spreadRadius: 2,
    ),
  ],
)

3. Disabled Tile

CustomListTile(
  title: 'Coming Soon',
  subtitle: 'Feature in development',
  leading: Icon(Icons.lock_clock),
  enabled: false,
  backgroundColor: Colors.grey[200],
)

Parameter Reference

Core Content

Parameter	Type	Description
title	String	Required primary text
subtitle	String?	Optional secondary text
subtitleWidget	Widget?	Custom subtitle widget
leading	Widget?	Leading widget
trailing	Widget?	Trailing widget

Visual Styling

Parameter	Type	Default	Description
backgroundColor	Color	Colors.white	Background color
gradient	Gradient?	null	Background gradient
border	BoxBorder?	null	Border styling
borderRadius	double	8.0	Corner radius
elevation	double	4.0	Shadow elevation
shadowColor	Color	Colors.grey	Shadow color
customShadows	List<BoxShadow>?	null	Custom shadow effects
titleStyle	TextStyle?	null	Title text style
subtitleStyle	TextStyle?	null	Subtitle text style

Layout Control

Parameter	Type	Description
height	double?	Fixed tile height
contentPadding	EdgeInsetsGeometry?	Inner padding
minLeadingWidth	double?	Leading widget min width
leadingWidth	double?	Leading widget fixed width
horizontalTitleGap	double?	Space between leading and title
minVerticalPadding	double?	Minimum vertical padding

Interaction

Parameter	Type	Description
onTap	VoidCallback?	Tap handler
onLongPress	VoidCallback?	Long-press handler
enabled	bool	Enable/disable interaction
hoverColor	Color?	Hover state color
focusColor	Color?	Focus state color
splashColor	Color?	Splash effect color
enableFeedback	bool	Enable touch feedback

Best Practices

1. Performance:

• Avoid complex widgets in frequently rebuilt tiles
• Use const constructors for static elements
• Consider dense mode for long lists

2. Accessibility:

• Ensure sufficient text contrast
• Provide meaningful tap targets
• Include semantic labels for interactive tiles

3. Design Consistency:

• Standardize elevation across your app
• Maintain consistent padding
• Use a limited set of tile variants

4. Responsive Design:

• Test different content lengths
• Consider landscape layouts
• Adapt spacing for different screen sizes