zeba_academy_component_lab 0.0.1

zeba_academy_component_lab: ^0.0.1 copied to clipboard

🧩 Zeba Academy Component Lab 📄 Canvas Document (Production README) 🎯 1. Product Overview

Zeba Academy Component Lab is a Flutter-based interactive UI component playground designed to build, preview, edit, and document widgets in real time.

It acts like a lightweight Flutter Storybook + design system sandbox, enabling developers to visually experiment with UI components and instantly see code output.

🚀 2. Core Objective

This package is built to solve:

❌ Lack of real-time widget preview tools in Flutter projects ❌ Hard-to-maintain UI documentation ❌ Manual UI testing without visual feedback ❌ No unified component exploration system ✔ Solution Provided

A single environment that combines:

Component browsing Live rendering Property editing Code generation Documentation viewing ✨ 3. Key Features 🧩 Component Gallery Displays all registered UI components Organized and extendable registry system Quick selection interface 👀 Live Preview Engine Real-time widget rendering Instant UI updates on property changes Stateless + stateful component support 🎛 Property Editor Panel Dynamic UI controls for widget customization Supports: String inputs Boolean toggles Extensible property types (future-ready) 💻 Code Preview Panel Auto-generates Dart code from live state Helps developers learn and copy implementations Reflects real-time UI configuration 📖 Documentation Panel Displays component metadata Description and usage information Inline developer guidance 🏗 4. System Architecture ComponentLab (Main Shell) │ ├── WidgetGallery │ └── Component selection UI │ ├── LivePreview │ └── Real-time widget renderer │ ├── PropertyPanel │ └── Dynamic input controls │ ├── CodeView │ └── Generated Dart code output │ └── DocView └── Component documentation display 🧱 5. Core Design System 📦 Component Model

Each UI component is defined using:

ID Name Description Properties Builder function Code snippet ComponentModel( id, name, description, properties, builder, codeSnippet ) 🎛 Property Model

Defines editable UI properties:

key label type default value PropertyModel( key, label, type, defaultValue ) ⚙ Registry System

Central registry holds all components:

ComponentRegistry.components

Used for:

Listing UI components Feeding gallery UI Driving preview engine 💻 Code Generation Engine

Converts UI state into Dart code:

Widget + Props → Dart Code String

Purpose:

Developer learning Copy-ready output Debugging UI structure 📦 6. Installation Add dependency dependencies: zeba_academy_component_lab: ^0.0.1 🧪 7. Usage Basic Setup import 'package:flutter/material.dart'; import 'package:zeba_academy_component_lab/zeba_academy_component_lab.dart';

void main() { runApp(const MaterialApp( debugShowCheckedModeBanner: false, home: ComponentLab(), )); } 🧩 8. Adding Custom Components

Developers can extend the system by registering new components:

ComponentModel( id: "custom_button", name: "Custom Button", description: "Reusable styled button component", properties: [ PropertyModel( key: "text", label: "Button Text", type: PropertyType.string, defaultValue: "Click Me", ), ], builder: (props) { return ElevatedButton( onPressed: () {}, child: Text(props["text"]), ); }, codeSnippet: ''' ElevatedButton( onPressed: () {}, child: Text("Click Me"), ) ''', ); 📁 9. Project Structure lib/ ├── zeba_academy_component_lab.dart ├── src/ │ ├── core/ │ │ ├── component_model.dart │ │ ├── property_model.dart │ │ │ ├── engine/ │ │ ├── component_registry.dart │ │ ├── code_generator.dart │ │ │ ├── ui/ │ │ ├── component_lab.dart │ │ ├── widget_gallery.dart │ │ ├── live_preview.dart │ │ ├── property_panel.dart │ │ ├── code_view.dart │ │ ├── doc_view.dart │ │ │ └── utils/ 📌 10. System Modules Core Layer ComponentModel PropertyModel Engine Layer ComponentRegistry CodeGenerator UI Layer ComponentLab (main shell) WidgetGallery LivePreview PropertyPanel CodeView DocView 📈 11. Roadmap Phase 1 (Current) ✔ Component registry system ✔ Live preview engine ✔ Property editor ✔ Code generator Phase 2 (Enhancements) 🔥 Drag & drop UI builder 🔥 JSON-based component schema 🔥 Save/load workspace state 🔥 Theme switching (Material 3 / Dark mode) Phase 3 (Advanced) 🧠 AI component generator 🔌 Plugin system support 📤 Export full Flutter screens ☁ Cloud sync for components 👨‍💻 12. About Developer

Sufyan bin Uzayr Open-source developer focused on scalable Flutter ecosystems.

🌐 https://sufyanism.com 💼 https://www.linkedin.com/in/sufyanism 🎓 13. Zeba Academy Ecosystem

A platform for learning modern development:

🌐 https://zeba.academy 📚 https://code.zeba.academy ▶ https://www.youtube.com/@zeba.academy 📸 https://www.instagram.com/zeba.academy 📜 14. License

This project is licensed under:

GNU General Public License v3.0 (GPL-3.0)

You are free to:

Use Modify Distribute

Under the same license terms.

🔗 https://www.gnu.org/licenses/gpl-3.0.html

⭐ 15. Contribution

We welcome contributions:

⭐ Star the repository 🍴 Fork the project 🧩 Add new components 🔧 Improve engine modules 📩 Submit pull requests 🧩 End of Canvas Document