Zeba Academy UI Patterns #

A collection of ready-to-use Flutter UI patterns for building beautiful and scalable applications.

Overview #

Zeba Academy UI Patterns is a reusable Flutter UI component library designed to speed up application development.

It provides clean, customizable, and production-ready UI patterns including:

• Dashboard layouts
• Profile sections
• Settings screens
• Ecommerce product cards
• Social feed layouts

Built with Flutter and Material Design principles.

Features #

Dashboard UI #

Create beautiful dashboard interfaces with:

• Statistics cards
• Icon based summaries
• Custom colors
• Responsive layouts

Example:

ZebaDashboardCard(

  title: "Students",

  value: "1200",

  icon: Icons.people,

)

Profile UI #

Ready profile header component:

ZebaProfileHeader(

name: "Sufyan",

email: "developer@example.com",

)

Features:

• Avatar support
• Initial fallback
• User information layout

Settings UI #

Build settings pages easily:

ZebaSettingsTile(

title: "Settings",

subtitle: "Manage account",

icon: Icons.settings,

)

Includes:

• Icons
• Navigation support
• Custom actions

Ecommerce Cards #

Product display pattern:

ZebaProductCard(

title: "Flutter Course",

price: "\$49",

image: "image_url",

)

Useful for:

• Shopping apps
• Course apps
• Marketplace apps

Feed Layouts #

Social style feed card:

ZebaFeedCard(

username: "User",

content: "Hello Flutter!",

image: "avatar",

)

Perfect for:

• Community apps
• Social apps
• News feeds

Installation #

Add this package to your pubspec.yaml:

dependencies:

  zeba_academy_ui_patterns: ^1.0.0

Run:

flutter pub get

Import #

import 'package:zeba_academy_ui_patterns/zeba_academy_ui_patterns.dart';

Requirements #

• Flutter >= 3.10.0
• Dart >= 3.12.0

Project Structure #

lib/

├── dashboard/
│   └── dashboard_card.dart
│
├── profile/
│   └── profile_header.dart
│
├── settings/
│   └── settings_tile.dart
│
├── ecommerce/
│   └── product_card.dart
│
└── feed/
    └── feed_card.dart

Testing #

Run package tests:

flutter test

Analyze code:

flutter analyze

Roadmap #

Future updates:

• More dashboard templates
• Authentication screens
• Chat UI patterns
• Onboarding screens
• Animation support
• Dark mode components
• Theme customization
• More Material 3 widgets

Contributing #

Contributions are welcome.

Steps:

1. Fork the repository
2. Create a feature branch

git checkout -b feature/new-component

3. Commit changes

git commit -m "Add new UI component"

4. Push branch

git push origin feature/new-component

5. Create Pull Request

License #

This project is licensed under the GNU General Public License v3.0.

You are free to:

• Use
• Modify
• Share
• Distribute

Under the terms of GPL-3.0.

See:

LICENSE

for full license details.

About Me #

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

Learn more about my work:

🌐 Website: https://sufyanism.com/

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

Zeba Academy #

Your all-in-one learning hub! 🚀

Explore courses and resources in coding, technology, and development.

Build practical skills through:

• Coding tutorials
• Real-world projects
• Development resources
• Hands-on learning

Visit:

🌐 Main Website
https://zeba.academy

💻 Coding Resources
https://code.zeba.academy

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

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

Thank you for using Zeba Academy UI Patterns ❤️