layout-widgets

Layout Widgets Reference

Core structural widgets for building iOS-style screens with proper spacing and navigation.

ScaffoldWidget

Main screen container with navigation bar and toolbar.

ScaffoldWidget(
  navigationBar: CupertinoNavigatorBarWidget(
    title: 'Settings',
    imageFilter: NavigatorBarImageFilter.enabled,
    leading: null,
    trailing: LabelButtonWidget.label(
      label: 'Done',
      onPressed: () => Navigator.pop(context),
    ),
  ),
  toolBar: ToolBarWidget(
    imageFilter: ToolBarImageFilter.enabled,
    child: ButtonWidget.label(
      size: const LargeButtonSize(),
      color: const BlueButtonColor(),
      label: 'Continue',
      onPressed: () {},
    ),
  ),
  child: SingleChildScrollView(
    child: SafeArea(
      child: Column(
        children: [
          // Content
        ],
      ),
    ),
  ),
)

Background Colors:

• Light: defaultSystemGroupedBackgroundsColors.primaryLight
• Dark: defaultSystemBackgroundsColors.primaryDarkBase

CupertinoNavigatorBarWidget

iOS navigation bar with blur effects and auto back button.

CupertinoNavigatorBarWidget(
  title: 'Profile',
  imageFilter: NavigatorBarImageFilter.enabled, // or .disabled
  leading: LabelButtonWidget.label(
    label: 'Cancel',
    onPressed: () => Navigator.pop(context),
  ),
  trailing: LabelButtonWidget.label(
    label: 'Save',
    onPressed: () {},
  ),
)

Features:

• Auto back button when route can pop
• Tap title to scroll to top
• 44pt height (Apple HIG standard)
• Blur with 80% opacity when enabled

ToolBarWidget

Bottom toolbar for actions and buttons.

ToolBarWidget(
  imageFilter: ToolBarImageFilter.enabled,
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 5),
  child: ButtonWidget.label(
    size: const LargeButtonSize(),
    color: const BlueButtonColor(),
    label: 'Continue',
    onPressed: () {},
  ),
)

// Multiple buttons
ToolBarWidget(
  child: Row(
    children: [
      Expanded(
        child: ButtonWidget.label(
          size: const LargeButtonSize(),
          color: const GreyTransparentButtonColor(),
          label: 'Cancel',
          onPressed: () {},
        ),
      ),
      const SizedBox(width: 8),
      Expanded(
        child: ButtonWidget.label(
          size: const LargeButtonSize(),
          color: const BlueButtonColor(),
          label: 'Save',
          onPressed: () {},
        ),
      ),
    ],
  ),
)