Zeba Academy Grid

pub package License: GPL v3 Flutter

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

Platform Supported
Android ✅
iOS ✅
Web ✅
Windows ✅
macOS ✅
Linux ✅

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

Screen Width Columns
< 600 px 2
600 – 899 px 3
900 – 1199 px 4
≥ 1200 px 6

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.

Libraries

zeba_academy_grid