apptomate_custom_grid_tile

A versatile grid-style tile widget with flexible layout options, shadow effects, and tap interactions. Ideal for dashboard items, card-based UIs, or any grid layout in Flutter applications.

Features

Responsive Dimensions:
- Custom width (defaults to full width)
- Optional height control
Visual Customization:
- Background color
- Rounded corners (borderRadius)
- Elevation (shadow depth)
- Shadow color
Rich Content Support:
- Title with ellipsis overflow
- Optional multi-line subtitle
- Leading widget (left-aligned)
- Trailing widget (right-aligned)
Interaction:
- InkWell ripple effect
- Optional onTap callback

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_grid_tile: ^0.0.1

Basic Usage

CustomGridTile(
  title: 'Dashboard',
  subtitle: 'View analytics',
  leading: Icon(Icons.analytics),
  width: 180,
  height: 120,
  onTap: () => openDashboard(),
)

Advanced Example

Row(
  children: [
    CustomGridTile(
      title: 'Notifications',
      subtitle: '5 unread messages',
      leading: Badge(child: Icon(Icons.notifications)),
      trailing: Icon(Icons.chevron_right),
      backgroundColor: Colors.blue[50],
      borderRadius: 12,
    ),
    SizedBox(width: 16),
    CustomGridTile(
      title: 'Upload',
      leading: Icon(Icons.cloud_upload),
      elevation: 8,
      shadowColor: Colors.blue.withOpacity(0.2),
      height: 100,
    ),
  ],
)

Parameters

Parameter	Type	Default	Description
`title`	`String`	Required	Primary text (single line)
`subtitle`	`String?`	`null`	Secondary text (max 2 lines)
`leading`	`Widget?`	`null`	Left-aligned widget
`trailing`	`Widget?`	`null`	Bottom-right aligned widget
`backgroundColor`	`Color`	`Colors.white`	Tile fill color
`borderRadius`	`double`	`8.0`	Corner radius
`elevation`	`double`	`4.0`	Shadow depth
`shadowColor`	`Color`	`Colors.grey`	Shadow color
`onTap`	`VoidCallback?`	`null`	Tap handler
`width`	`double`	`double.infinity`	Tile width
`height`	`double?`	`null`	Optional fixed height

Layout Behavior

Leading + Title:
Shows horizontally aligned when both exist
Subtitle:
Appears below title with top padding
Trailing:
Always aligned to the bottom-right
Overflow Handling:
- Title: Single line with ellipsis
- Subtitle: Two lines max with ellipsis

Dependencies

Flutter SDK (requires material.dart)

CustomGridTile Widget