This is a package for default beautiful card usage.

Features

colorful cards generation

Properties

A widget that provides a card with following properties.

title is the title of the card.

subtitle is the subtitle of the card.

icon is the icon displayed in the card.

index is the number of cards required.

onTap is provision for writing onclick function.

Getting started

Add colorful_cards: to your pubspec.yaml dependencies then run flutter pub get

Add from pub Stable

dependencies:
colorful_cards:

Usage

import 'package:colorful_cards/colorful_cards.dart';
import 'package:flutter/material.dart'; // Import your CategoryCard widget

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final List<Category> categories = [
    Category("Shopping", "3 Items", Icons.shopping_cart),
    Category("Coffee & Bar", "4 Items", Icons.local_cafe),
    Category("Events", "4 Items", Icons.event),
    Category("Jobseeker", "2 Items", Icons.work),
    Category("Restaurant", "2 Items", Icons.restaurant),
    Category("Automotive", "4 Items", Icons.directions_car),
    Category("New Category", "1 Item", Icons.new_releases),
    Category("New Category", "1 Item", Icons.new_releases),
    Category("New Category", "1 Item", Icons.new_releases),// Example for dynamic colors
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Categories"),
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        elevation: 0,
      ),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 30,
            crossAxisSpacing: 10,
            childAspectRatio: 2 / 1.4,
          ),
          itemCount: categories.length,
          itemBuilder: (context, index) {
            return CategoryCard(
              title: categories[index].name,
              subtitle: categories[index].items,
              icon: categories[index].icon,
              index: index,
              onTap: (){Navigator.pop(context);},
            );
          },
        ),
      ),
    );
  }
}

class Category {
  final String name;
  final String items;
  final IconData icon;

  Category(this.name, this.items, this.icon);
}

Additional information