Skip to main content

Documentation Index

Fetch the complete documentation index at: https://synapsync.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

The spacing system provides pre-built spacing constants for consistent vertical and horizontal spacing throughout your application.

​
Overview

Nebux Design System includes spacing constants as SizedBox widgets for convenient use in Flutter layouts. All spacing values are in logical pixels and follow an 8-point grid system.

​
Default spacing

The default padding size is 16 logical pixels, used as the standard spacing unit: 
const double defaultPaddingSize = 16;

const SizedBox heightSpaceDefault = SizedBox(height: 16);
const SizedBox widthSpaceDefault = SizedBox(width: 16);

​
Vertical spacing

Use height spacing constants for vertical space between widgets: 
Column(
  children: [
    Text('First item'),
    heightSpace8,
    Text('Second item'),
    heightSpace16,
    Text('Third item'),
  ],
)

​
Available height constants

const SizedBox heightSpace2 = SizedBox(height: 2);
const SizedBox heightSpace4 = SizedBox(height: 4);
const SizedBox heightSpace6 = SizedBox(height: 6);
const SizedBox heightSpace8 = SizedBox(height: 8);
const SizedBox heightSpace10 = SizedBox(height: 10);
const SizedBox heightSpace12 = SizedBox(height: 12);

​
Horizontal spacing

Use width spacing constants for horizontal space between widgets: 
Row(
  children: [
    Icon(Icons.star),
    widthSpace8,
    Text('Rating'),
    widthSpace16,
    Text('4.5'),
  ],
)

​
Available width constants

const SizedBox widthSpace2 = SizedBox(width: 2);
const SizedBox widthSpace4 = SizedBox(width: 4);
const SizedBox widthSpace6 = SizedBox(width: 6);
const SizedBox widthSpace8 = SizedBox(width: 8);
const SizedBox widthSpace10 = SizedBox(width: 10);
const SizedBox widthSpace12 = SizedBox(width: 12);
const SizedBox widthSpace14 = SizedBox(width: 14);

​
Real-world example

Here’s how spacing constants are used in the Nebux Design System showcase: 
class ExampleScreen extends StatelessWidget {
  const ExampleScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text('Typography Roles', style: context.nebuxTypography.heading),
            heightSpace8,
            Text('Section header', style: context.nebuxTypography.section),
            heightSpace4,
            Text(
              'Content text for articles and descriptions.',
              style: context.nebuxTypography.content,
            ),
            heightSpace4,
            Text(
              'Paragraph text for default body content.',
              style: context.nebuxTypography.paragraph,
            ),
            heightSpace4,
            Text('Caption / metadata', style: context.nebuxTypography.caption),
            heightSpace24,
            Text('Button Variants', style: context.nebuxTypography.heading),
            heightSpace12,
            NbxButton(
              text: 'Filled Button',
              onPressed: () {},
            ),
            heightSpace8,
            NbxButton(
              text: 'Outline Button',
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}
Spacing constants create visual hierarchy and rhythm in layouts. Use smaller spacing (4-8px) between related items and larger spacing (16-24px) between sections.

​
Spacing scale reference

​
Common spacing values

SizeValueUse Case
2pxSpace2Minimal spacing, tight layouts
4pxSpace4Between closely related items
8pxSpace8Between related content
12pxSpace12Between form fields
16pxSpace16Default spacing, between sections
24pxSpace24Between major sections
32pxSpace32Large section separation
48pxSpace48Extra large gaps

​
Padding patterns

Common padding patterns using spacing constants: 
Card(
  child: Padding(
    padding: const EdgeInsets.all(defaultPaddingSize),
    child: Column(
      children: [
        Text('Title'),
        heightSpace8,
        Text('Description'),
      ],
    ),
  ),
)

​
Spacing best practices

​
8-point grid system

Most spacing values follow an 8-point grid (8, 16, 24, 32, 40, 48, etc.) for consistent alignment: 
// Good: Uses 8-point grid
heightSpace8, heightSpace16, heightSpace24

// Also available: Fine-tuned spacing for special cases
heightSpace4, heightSpace12, heightSpace20

​
Content hierarchy

Use spacing to establish visual hierarchy:
  • 4-8px: Between tightly related items (e.g., label and value)
  • 12-16px: Between form fields or list items
  • 24-32px: Between major sections
  • 48px+: Between distinct page sections

​
Responsive spacing

For responsive layouts, consider using MediaQuery to adjust spacing: 
final isSmallScreen = MediaQuery.of(context).size.width < 600;

Column(
  children: [
    Text('Title'),
    isSmallScreen ? heightSpace8 : heightSpace16,
    Text('Content'),
  ],
)

​
Custom spacing

If you need custom spacing not provided by the constants: 
// Custom vertical spacing
SizedBox(height: 18)

// Custom horizontal spacing
SizedBox(width: 22)

// Using EdgeInsets for padding
Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 20,
    vertical: 12,
  ),
  child: Text('Custom padding'),
)
While custom spacing is supported, prefer using the provided spacing constants for consistency across your application.

​
Import

Spacing constants are exported from the main package: 
import 'package:nebux_design_system/nebux_design_system.dart';

// All spacing constants are now available
heightSpace8
widthSpace16
defaultPaddingSize