colorful_cards 0.0.2

colorful_cards: ^0.0.2 copied to clipboard

example/lib/main.dart

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);
}