🧩 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