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.