Skip to content

Area Layouts

Use widgets such as SafeArea to isolate key regions, avoid system UI overlap, and split screens into clear sections.

  • SafeArea: Adds automatic padding to avoid notch, navigation bar, and home indicator overlap.
  • Card: Material-style card container for grouped content.
  • PageView: Scrollable view by page unit.
  • VSplit: Splits area vertically.
  • HSplit: Splits area horizontally.

Area Layouts

SafeArea Properties

SafeArea is essential on modern devices to prevent content overlap with system UI.

1. Property Summary

Property Type Default Description
visible bool true Ignores safe insets and fills full screen when false
left / top / right / bottom bool true Enables safe padding by direction
minimum EdgeInsets 0.0 Additional minimum padding
maintainBottomViewPadding bool true Keeps bottom view padding when keyboard appears

2. Tips

  • Set bottom: false if you need content to extend to the very bottom edge.
  • Use visible: false for full-screen experiences such as games or video players.

Card Properties

Card is a Material-style container for grouping content with elevation and shape.

1. Property Summary

Property Type Default Description
visible bool true Excluded from render and layout when false
color Color #FFFFFF Card background color
shadowColor Color #000000 Card shadow color
elevation double 1.0 Shadow depth
shape Object - Card shape and border style
margin EdgeInsets 4.0 Outer spacing around card
clipBehavior Enum none Child clipping behavior
semanticContainer bool true Accessibility grouping behavior

2. Tips

  • Use elevation to tune visual depth.
  • Use shape.borderRadius to create rounded corners.
  • Configure border foreground behavior to reduce visual overlap with child content.