responsive_grid_layout #

A powerful, customizable responsive grid widget for Flutter with automatic width calculation and flexible layout options.

✨ Features #

• 🎯 Automatic width calculation - Perfect item sizing based on available space
• 📱 Responsive by default - Adapts to different screen sizes automatically
• 🎨 Flexible layouts - Fixed or responsive modes
• ⚡ High performance - Efficient rendering with builder pattern
• 🎭 Animation support - Smooth transitions when items appear
• 🔄 Loading states - Built-in skeleton loading
• 📦 Easy to use - Intuitive API with sensible defaults

📸 Screenshots #

[Add screenshots of your examples here]

🚀 Getting Started #

Add this to your pubspec.yaml:

dependencies:
  responsive_grid_layout: ^1.0.0

Then run:

flutter pub get

💡 Usage #

Basic Example #

import 'package:responsive_grid_layout/responsive_grid_layout.dart';

ResponsiveGrid(
  itemCount: items.length,
  itemsPerRow: 3,
  horizontalSpacing: 16,
  verticalSpacing: 16,
  itemBuilder: (context, index, width) {
    return MyCard(data: items[index]);
  },
)

Responsive Mode #

ResponsiveGrid(
  itemCount: products.length,
  minItemWidth: 250,  // Minimum width per item
  maxItemsPerRow: 4,  // Max items on large screens
  itemBuilder: (context, index, width) {
    return ProductCard(product: products[index]);
  },
)

Using Children #

ResponsiveGrid(
  itemsPerRow: 3,
  children: [
    Card(child: Text('Item 1')),
    Card(child: Text('Item 2')),
    Card(child: Text('Item 3')),
  ],
)

📖 Full Documentation #

For complete documentation, examples, and API reference, visit:

• pub.dev documentation
• Example app

🤝 Contributing #

Contributions are welcome! Please read our contributing guidelines first.

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

💖 Support #

If you find this package useful, please consider:

• ⭐ Starring the repo
• 👍 Liking on pub.dev
• 🐛 Reporting issues
• 💡 Suggesting new features

📧 Contact #

• GitHub: @yourusername
• Email: [email protected]