Layout & Scrolling Widgets

Neon provides a comprehensive layout engine capable of building responsive and fluid mobile interfaces.

1. Container

Container is a multi-purpose box model widget combining sizing, padding, margin, border decoration, and background colors.

Container(
  width: 320,
  height: 180,
  padding: NeonEdgeInsets.all(16.0),
  margin: NeonEdgeInsets.symmetric(vertical: 8.0),
  decoration: NeonBoxDecoration(
    color: NeonColor(0xFF1E1E2E),
    borderRadius: NeonBorderRadius.circular(16.0),
    border: NeonBorder.all(
      color: NeonColor(0xFF00E5FF),
      width: 1.5,
    ),
  ),
  child: Center(
    child: Text('Styled Container', style: NeonTextStyle(color: NeonColors.white)),
  ),
)

Properties

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | width | double? | null | Container width (clamped on serialization if infinite) | | height | double? | null | Container height | | padding | NeonEdgeInsets? | null | Inner padding surrounding child | | margin | NeonEdgeInsets? | null | Outer spacing surrounding container | | decoration | NeonBoxDecoration?| null | Color, border radius, and outline styles | | child | NeonWidget? | null | Child widget |

2. Column & Row

Flex layout primitives for arranging widgets vertically or horizontally.

Column(
  mainAxisAlignment: NeonMainAxisAlignment.spaceBetween,
  crossAxisAlignment: NeonCrossAxisAlignment.center,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

3. Stack & Positioned

Allows widgets to overlap in 3D Z-index order.

Stack(
  children: [
    Container(
      width: 300,
      height: 200,
      color: NeonColor(0xFF121212),
    ),
    Positioned(
      bottom: 16,
      right: 16,
      child: FilledButton(
        key: 'stack-cta',
        onPressed: () {},
        child: Text('Overlay Action'),
      ),
    ),
  ],
)

4. SingleChildScrollView & ListView

Scrollable viewports for handling dynamic, unbounded content.

ListView.builder(
  itemCount: 50,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.bolt),
      title: Text('Task #$index'),
      subtitle: Text('Status: Active'),
      trailing: Checkbox(
        key: 'task-check-$index',
        value: false,
        onChanged: (val) {},
      ),
    );
  },
)

5. CustomScrollView & Slivers

For collapsible app bars, floating headers, and advanced sliver scrolling:

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Neon Slivers'),
      floating: true,
      expandedHeight: 200.0,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Sliver Item $index')),
        childCount: 20,
      ),
    ),
  ],
)