zeba_academy_dynamic_layout_engine

🚀 A smart, constraint-based dynamic layout engine for Flutter.

Build fully responsive UIs without breakpoints using a powerful rule-based and constraint-driven system.

✨ Features

🧩 Constraint-based layouts (like AutoLayout)
🔄 Auto rearrangement based on screen size
⚙️ Rule-based UI engine
📱 No breakpoints required
⚡ Lightweight and fast
🧠 Declarative layout system

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_dynamic_layout_engine: ^0.0.1

🚀 Getting Started

1. Import package

import 'package:zeba_academy_dynamic_layout_engine/zeba_academy_dynamic_layout_engine.dart';

2. Basic Example

DynamicLayout(
  engine: LayoutEngine(
    rules: [
      LayoutRule(
        condition: (ctx) => ctx.maxWidth < 400,
        action: (ctx) {
          ctx.nodes['box2']!.y = 100;
        },
      ),
    ],
  ),
  items: [
    DynamicItem(
      node: LayoutNode(
        id: 'box1',
        width: 100,
        height: 100,
      ),
      child: Container(color: Colors.red),
    ),
    DynamicItem(
      node: LayoutNode(
        id: 'box2',
        width: 100,
        height: 100,
        constraints: [
          LayoutConstraint(
            targetId: 'box1',
            type: ConstraintType.rightTo,
            offset: 10,
          ),
        ],
      ),
      child: Container(color: Colors.blue),
    ),
  ],
)

🧠 Core Concepts

🔹 LayoutNode

Represents a UI element with size and constraints.

🔹 LayoutConstraint

Defines relationships between nodes (left, right, top, bottom, center).

🔹 LayoutEngine

Processes rules and constraints to compute positions.

🔹 LayoutRule

Applies dynamic behavior based on screen conditions.

⚙️ How It Works

Create nodes with constraints
Define rules for dynamic behavior
LayoutEngine processes rules
Constraint solver calculates positions
UI renders using Stack + Positioned

📊 Use Cases

Adaptive dashboards
Dynamic forms
Responsive cards/grid systems
Complex UI without breakpoints
Low-code UI builders

🛣️ Roadmap

🔄 Animation support
🧠 Advanced constraint solver (dependency graph)
🐞 Debug overlay
📐 Intrinsic size support
🧩 Visual layout builder

🤝 Contributing

Contributions are welcome!

Fork the repo
Create a feature branch
Submit a PR

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 sufyanism.com or connect with me on Linkedin

Your all-in-one no-bloat hub!

🚀 Explore cutting-edge resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated directives, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development. ➡ Visit our main site: zeba.academy
➡ Explore hands-on courses and resources at: code.zeba.academy
➡ Check out our YouTube for more tutorials: zeba.academy
➡ Follow us on Instagram: zeba.academy

Thank you for visiting!