openwebf-host-embedding-constraints

Fix Flutter layout constraints when embedding WebF in scrollable parents.

Updated Dec 17, 2025
One-click install
npx skills add https://github.com/archview-ai/webf-plugin --skill openwebf-host-embedding-constraints
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: openwebf-host-embedding-constraints
Source: https://github.com/archview-ai/webf-plugin/tree/main/webf-plugin/skills/openwebf-host-embedding-constraints
Command: npx skills add https://github.com/archview-ai/webf-plugin --skill openwebf-host-embedding-constraints

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Fix Flutter layout/constraint issues when embedding WebF (scrollables, unbounded constraints, viewport sizing).

Core Features & Use Cases

  • Identify the embedding widget tree and the exact Flutter error
  • Recommend minimal constraint fixes; prefer full-screen embedding
  • Provide MCP-backed embedding guidance and common pitfalls

Quick Start

Share a minimal constrained container pattern to host WebF (bounded height/width).

Frequently Asked Questions about openwebf-host-embedding-constraints

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does WebF fail to render inside a ListView or ScrollView in Flutter?

WebF requires bounded constraints to render, but scrollable parents like ListView and ScrollView pass unbounded (infinite) height constraints to their children. WebF cannot layout with infinite dimensions, causing a layout exception. Wrapping WebF in a SizedBox or Container with explicit height fixes this.

How do I embed WebF in a partial-screen layout without layout errors?

Apply bounded constraints by nesting WebF inside a Container or SizedBox with defined height and width values. Avoid placing WebF directly in unconstrained parents; provide explicit dimensions matching your layout intent, and prefer full-screen embedding when feasible.

What's the minimal fix for WebF constraint issues in Flutter?

Identify the parent widget tree causing unbounded constraints, then wrap WebF in a Container with bounded height and width. This minimal remediation satisfies Flutter's layout algorithm without restructuring your entire widget hierarchy.

Can I embed WebF inside a Column or Row without constraint problems?

Columns and Rows pass bounded constraints along one axis but unbounded along the perpendicular axis. WebF requires bounds on both axes, so wrap it in a SizedBox or Expanded with explicit dimensions to provide full constraint coverage.

When should I use full-screen WebF embedding instead of partial layouts?

Full-screen embedding eliminates constraint negotiation complexity and is preferred when your use case permits. Use partial-screen embedding only when WebF must coexist with other UI elements; otherwise, full-screen reduces layout overhead and constraint-related debugging.

Does WebF support embedding with infinite height constraints?

No. WebF cannot render with unbounded or infinite height constraints. Flutter requires all render objects to resolve to finite dimensions before painting. Always provide explicit height values or use Expanded with a bounded parent container.