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 #

1. Create nodes with constraints
2. Define rules for dynamic behavior
3. LayoutEngine processes rules
4. Constraint solver calculates positions
5. 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!