CustomGridTile

A versatile grid tile widget with extensive customization options for building beautiful grid layouts with interactive elements.

Features

• Flexible Layout:

  • Adjustable dimensions
  • Responsive content organization
  • Header, footer, and body sections
  • Center or left-aligned titles

• Visual Customization:

  • Background colors/gradients
  • Custom borders and radius
  • Elevation and shadow effects
  • Text styling and overflow control
  • Interactive state colors

• Content Options:

  • Leading icons/avatars
  • Trailing widgets
  • Custom footer section
  • Multi-line text support

• Interaction:

  • Tap/long-press handlers
  • Visual feedback options
  • Disabled state support

Installation

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_grid_tile: ^0.0.2

Basic Usage

CustomGridTile(
  title: 'Product Name',
  subtitle: 'Product description',
  height: 150,
  onTap: () => navigateToProduct(),
)

Complete Examples

1. Product Card

CustomGridTile(
  title: 'Wireless Headphones',
  subtitle: 'Noise cancelling, 30hr battery',
  leading: Icon(Icons.headphones, size: 32),
  trailing: Icon(Icons.favorite_border),
  footer: Container(
    padding: EdgeInsets.all(4),
    color: Colors.black54,
    child: Text('\$199', 
      style: TextStyle(color: Colors.white)),
  ),
  backgroundColor: Colors.white,
  borderRadius: 12,
  elevation: 6,
)

2. Gradient Tile with Centered Content

CustomGridTile(
  title: 'Premium Feature',
  subtitle: 'Exclusive content for members',
  centerTitle: true,
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.deepPurple],
  ),
  titleStyle: TextStyle(color: Colors.white),
  subtitleStyle: TextStyle(color: Colors.white70),
  height: 180,
)

3. Compact Grid Item

CustomGridTile(
  title: 'Compact Mode',
  height: 100,
  width: 100,
  padding: EdgeInsets.all(8),
  titleStyle: TextStyle(fontSize: 12),
  dense: true,
)

Parameter Reference

Core Content

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

Layout

Parameter	Type	Default	Description
width	double	double.infinity	Tile width
height	double	120	Tile height
padding	EdgeInsets	12	Inner padding
centerTitle	bool	false	Center-align content
footerAlignment	Alignment	bottomRight	Footer position

Text Styling

Parameter	Type	Default	Description
titleStyle	TextStyle?	null	Title text style
subtitleStyle	TextStyle?	null	Subtitle text style
titleMaxLines	int?	1	Title line limit
subtitleMaxLines	int?	2	Subtitle line limit
titleOverflow	TextOverflow?	ellipsis	Title overflow
subtitleOverflow	TextOverflow?	ellipsis	Subtitle overflow

Visual Styling

Parameter	Type	Default	Description
backgroundColor	Color	white	Background color
gradient	Gradient?	null	Background gradient
borderRadius	double	8	Corner radius
elevation	double	4	Shadow elevation
shadowColor	Color	grey	Shadow color
customShadows	List<BoxShadow>?	null	Custom shadows
border	BoxBorder?	null	Border styling

Interaction

Parameter	Type	Default	Description
onTap	VoidCallback?	null	Tap handler
onLongPress	VoidCallback?	null	Long-press handler
showOverlayOnTap	bool	true	Show tap overlay
splashColor	Color?	null	Splash effect color
hoverColor	Color?	null	Hover state color
highlightColor	Color?	null	Highlight color

Best Practices

1. Grid Layouts:

   • Use consistent tile sizes in grids
   • Match aspect ratios with SliverGridDelegate
   • Consider responsive breakpoints

2. Content Density:

   • Adjust padding for different tile sizes
   • Use titleMaxLines to control text layout
   • Consider dense mode for compact grids

3. Visual Hierarchy:

   • Use elevation to indicate interactivity
   • Maintain consistent corner radii
   • Establish clear color schemes

4. Performance:

   • Cache network images in tiles
   • Avoid complex widgets in large grids
   • Use const constructors where possible