apptomate_custom_grid_tile 0.0.2

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

example/lib/main.dart

import 'package:apptomate_custom_grid_tile/apptomate_custom_grid_tile.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom Grid Tile')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: GridView.builder(
          itemCount: 6,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
            childAspectRatio: 1,
          ),
          itemBuilder: (context, index) {
            return CustomGridTile(
              title: 'Item $index',
              subtitle: 'Description for item $index that might be longer',
              leading: CircleAvatar(
                backgroundColor: Colors.primaries[index % Colors.primaries.length],
                child: Text(
                  '${index + 1}',
                  style: const TextStyle(color: Colors.white),
                ),
              ),
              trailing: Icon(
                Icons.star,
                color: index.isEven ? Colors.amber : Colors.grey,
              ),
              footer: index % 3 == 0
                  ? Container(
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(4),
                ),
                child: const Text(
                  'NEW',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              )
                  : null,
              onTap: () => print('Item $index tapped'),
              onLongPress: () => print('Item $index long pressed'),
              backgroundColor: Colors.white,
              gradient: index % 2 == 0
                  ? LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Colors.white,
                  Colors.blue.shade50,
                ],
              )
                  : null,
              borderRadius: 12,
              elevation: 6,
              shadowColor: Colors.blue.withOpacity(0.3),
              titleStyle: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w600,
                color: Colors.primaries[index % Colors.primaries.length],
              ),
              border: Border.all(
                color: Colors.grey.shade200,
                width: 1,
              ),
              titleMaxLines: 2,
              subtitleMaxLines: 3,
            );
          },
        ),
      ),
    );
  }
}