ArcaneCenter#

A helper component that centers its child both horizontally and vertically within its container.

Basic Usage#

ArcaneCenter(
  child: ArcaneText('Centered content'),
)

Properties#

Examples#

Full Screen Centered#

ArcaneCenter(
  styles: const ArcaneStyleData(
    minHeightCustom: '100vh',
  ),
  child: ArcaneColumn(
    crossAxisAlignment: AlignItems.center,
    gap: Gap.md,
    children: [
      ArcaneLoader(),
      ArcaneText('Loading...'),
    ],
  ),
)

Centered Card#

ArcaneCenter(
  styles: const ArcaneStyleData(
    minHeightCustom: '400px',
    background: Background.surface,
  ),
  child: ArcaneCard(
    styles: const ArcaneStyleData(
      maxWidthCustom: '400px',
      padding: PaddingPreset.xl,
    ),
    child: ArcaneColumn(
      crossAxisAlignment: AlignItems.center,
      gap: Gap.md,
      children: [
        span([text('🎉')]),
        ArcaneHeading(text: 'Welcome!'),
        ArcaneText('You have been successfully registered.'),
        ArcaneButton.primary(label: 'Continue', onPressed: () {}),
      ],
    ),
  ),
)

Placeholder Content#

ArcaneCenter(
  styles: const ArcaneStyleData(
    heightCustom: '300px',
    border: Border.dashed,
    borderRadius: Radius.lg,
  ),
  child: ArcaneColumn(
    crossAxisAlignment: AlignItems.center,
    gap: Gap.sm,
    children: [
      span([text('📷')]),
      ArcaneText('Drop image here'),
    ],
  ),
)

Error State#

ArcaneCenter(
  styles: const ArcaneStyleData(
    minHeightCustom: '60vh',
  ),
  child: ArcaneColumn(
    crossAxisAlignment: AlignItems.center,
    gap: Gap.lg,
    children: [
      ArcaneDiv(
        styles: const ArcaneStyleData(
          fontSize: FontSize.xl4,
        ),
        children: [span([text('❌')])],
      ),
      ArcaneHeading(text: 'Something went wrong'),
      ArcaneText('Please try again later'),
      ArcaneButton(label: 'Retry', onPressed: () {}),
    ],
  ),
)

Login Page#

ArcaneCenter(
  styles: const ArcaneStyleData(
    minHeightCustom: '100vh',
    padding: PaddingPreset.lg,
    background: Background.default_,
  ),
  child: ArcaneCard(
    styles: const ArcaneStyleData(
      widthCustom: '100%',
      maxWidthCustom: '400px',
      padding: PaddingPreset.xl,
    ),
    child: ArcaneColumn(
      gap: Gap.lg,
      children: [
        ArcaneColumn(
          crossAxisAlignment: AlignItems.center,
          gap: Gap.sm,
          children: [
            ArcaneHeading(text: 'Sign In'),
            ArcaneText('Enter your credentials'),
          ],
        ),
        ArcaneTextInput(label: 'Email'),
        ArcaneTextInput(label: 'Password', type: TextInputType.password),
        ArcaneButton.primary(
          label: 'Sign In',
          onPressed: () {},
          isFullWidth: true,
        ),
      ],
    ),
  ),
)

Empty List State#

ArcaneCenter(
  styles: const ArcaneStyleData(
    padding: PaddingPreset.xl2,
  ),
  child: ArcaneEmptyState(
    icon: span([text('📝')]),
    title: 'No items yet',
    description: 'Create your first item to get started',
    action: ArcaneButton.primary(
      label: 'Create Item',
      onPressed: () {},
    ),
  ),
)

Related Components#

• ArcaneDiv - Generic layout div
• ArcaneContainer - Centered container with max-width
• ArcaneColumn - Vertical flex layout