zeba_academy_grid 1.0.0
zeba_academy_grid: ^1.0.0 copied to clipboard
Responsive Grid, Masonry Grid, Staggered Grid and Auto Grid widgets for Flutter.
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 #
| 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
💻 Coding Platform
▶ YouTube
https://www.youtube.com/@zeba.academy
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.