Zeba Academy Grid #

A lightweight, customizable, and responsive grid layout package for Flutter.

zeba_academy_grid provides beautiful and flexible grid widgets for Flutter applications, including responsive layouts, masonry grids, staggered layouts, and automatic column calculation. It is designed to be simple, dependency-free, highly customizable, and suitable for mobile, tablet, desktop, and web applications.

✨ Features #

• ✅ Responsive Grid Layout
• ✅ Masonry Grid
• ✅ Staggered Grid
• ✅ Automatic Column Calculation
• ✅ Responsive Breakpoints
• ✅ Adjustable Grid Spacing
• ✅ Custom Item Heights
• ✅ Scrollable Layouts
• ✅ Mobile, Tablet, Desktop & Web Support
• ✅ Lightweight
• ✅ Zero Third-party Grid Dependencies
• ✅ Easy to Customize
• ✅ Production Ready

Platform Support #

Installation #

Add the package to your pubspec.yaml

dependencies:
  zeba_academy_grid: ^1.0.0

Then run

flutter pub get

Import

import 'package:zeba_academy_grid/zeba_academy_grid.dart';

Widgets Included #

ZebaResponsiveGrid #

Automatically adjusts the number of columns based on the available screen width.

ZebaResponsiveGrid(
  children: List.generate(
    20,
    (index) => Card(
      child: Center(
        child: Text("Item $index"),
      ),
    ),
  ),
)

ZebaAutoGrid #

Automatically calculates the number of columns using the maximum item width.

ZebaAutoGrid(
  maxItemWidth: 180,
  children: List.generate(
    30,
    (index) => Card(
      child: Center(
        child: Text("Auto $index"),
      ),
    ),
  ),
)

ZebaMasonryGrid #

Create Pinterest-style masonry layouts with variable item heights.

ZebaMasonryGrid(
  columns: 2,
  items: List.generate(
    10,
    (index) => GridItem(
      height: 80 + index * 20,
      child: Card(
        child: Center(
          child: Text("Tile $index"),
        ),
      ),
    ),
  ),
)

ZebaStaggeredGrid #

Display staggered grid layouts with customizable item sizes.

ZebaStaggeredGrid(
  columns: 2,
  items: List.generate(
    20,
    (index) => GridItem(
      height: 120,
      child: Card(
        child: Center(
          child: Text("Item $index"),
        ),
      ),
    ),
  ),
)

GridItem #

The GridItem model is used by masonry and staggered grids.

GridItem(
  child: Card(),
  height: 150,
  crossAxisCellCount: 1,
)

Responsive Breakpoints #

Included Components #

• Responsive Grid
• Masonry Grid
• Staggered Grid
• Auto Grid
• Grid Item Model
• Responsive Helper

Example #

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Zeba Academy Grid"),
        ),
        body: ZebaResponsiveGrid(
          children: List.generate(
            20,
            (index) => Card(
              child: Center(
                child: Text("Item $index"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Why Zeba Academy Grid? #

• Lightweight implementation
• Easy to integrate
• Responsive by default
• Supports multiple layout styles
• Customizable spacing
• Automatic column calculation
• Works across all Flutter platforms
• Clean and maintainable API
• Designed for production applications

Roadmap #

Future releases may include:

• Sliver Grid Support
• Animated Grid Transitions
• Lazy Masonry Builder
• Infinite Grid Builder
• Drag & Drop Grid
• Grid Animations
• Custom Breakpoint Configuration
• RTL Layout Support
• Sticky Sections
• Grid Headers & Footers

Contributing #

Contributions are welcome!

If you discover a bug or have a feature request, feel free to open an issue or submit a pull request.

License #

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

See the LICENSE file for complete license information.

About Me #

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at https://sufyanism.com/ or connect with me on LinkedIn:

https://www.linkedin.com/in/sufyanism

Your all-in-one learning hub! #

🚀 Explore courses and resources in coding, technology, Flutter, AI, and software development at Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on learning.

Visit Zeba Academy #

🌐 Main Website

https://zeba.academy

💻 Coding Platform

https://code.zeba.academy

▶ YouTube

https://www.youtube.com/@zeba.academy

📷 Instagram

https://www.instagram.com/zeba.academy/

Support #

If you find this package useful, consider:

⭐ Starring the repository

👍 Liking and sharing the package

🐛 Reporting bugs

💡 Suggesting new features

🤝 Contributing to the project

Your support helps improve the package and encourages continued open-source development.

Made with ❤️ using Flutter by Zeba Academy.