Layout Widgets Overview¶
To build precise UI in Lucy Studio, combine multiple widgets into a structured layout.
If Text, Button, and Image are individual UI elements, layout widgets such as Row, Column, Stack, and Wrap define where those elements are placed.
Layout Widget Types¶
Layout widgets are grouped into three categories.
| Category | Widget | Description | Usage Tip |
|---|---|---|---|
| Basic Layouts | Row | Aligns children horizontally | Use for horizontal menu actions |
| Column | Aligns children vertically | Use for forms and card stacks | |
| Stack | Overlaps children | Use for badges or layered UI | |
| Wrap | Moves children to the next line when needed | Use for tags and chips | |
| List Layouts | GridView | Places children in a 2D grid | Use for product cards or galleries |
| ListView | Provides a 1D scroll list | Use for standard scroll lists | |
| MasonryGrid | Places variable-height cards across fixed columns | Use for Pinterest-style grids | |
| Area Layouts | Card | Material card container | Use for profile cards and info panels |
| SafeArea | Adds padding to avoid system UI overlap | Use to avoid notches and system bars | |
| PageView | Scrollable pages by page unit | Use for onboarding screens | |
| VSplit | Splits area vertically | Use to divide top and bottom zones | |
| HSplit | Splits area horizontally | Use to divide left and right zones |
Basic Layouts¶
Use Row, Column, Stack, and Wrap to define foundational structure.
Row: Align children left to right.Column: Align children top to bottom.Stack: Overlay children.Wrap: Automatically wraps children into new lines.
Learn more in Basic Layouts.
List Layouts¶
After basic layouts, use list-oriented widgets for larger collections.
ListView: Standard 1D scrolling layout.GridView: 2D grid for tiles and cards.MasonryGrid: Uneven-height card layout.
Learn more in List Layouts.
Area Layouts¶
Use widgets such as SafeArea to isolate regions, avoid system UI overlap, and split screens logically.
SafeArea: Adds safe padding for notch and home indicator.Card: Reusable card container.PageView: Swipe between pages.VSplit: Vertical split.HSplit: Horizontal split.
Learn more in Area Layouts.