apptomate_custom_grid_tile 0.0.1

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.

CustomGridTile Widget

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

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

Dependencies

• Flutter SDK (requires material.dart)