btwld/superdeckSuperDeck
PR #37

Block layouts

Quick overview of SuperDeck's block-based layout system

Block layouts

SuperDeck uses a block-based layout system for flexible content arrangement. Blocks are containers that hold different content types.

Core concept

Blocks automatically arrange themselves:

  • Vertical stacking - Blocks stack vertically by default
  • Horizontal sections - Use @section for side-by-side layouts
  • Flexible sizing - Control space with flex

Common blocks

@column        # Markdown content (most common)
@section       # Container for horizontal layouts
@image         # Images with fit options
@dartpad       # Interactive code examples
@qrcode        # QR codes
@widget        # Custom Flutter widgets

Layout examples

Single column (default)

# Title

Regular markdown content flows vertically.

More content below.

Two columns

@section

@column
Left side content

@column  
Right side content

Flexible sizing

@section

@column {
  flex: 2
}
Takes 2/3 of the space

@column {
  flex: 1
}
Takes 1/3 of the space

Mixed content

@section

@column
## Text Content
- Point one
- Point two

@image {
  src: assets/screenshot.png
  fit: contain
}

Block properties

All blocks support these properties:

  • flex - Relative size (default: 1)
  • align - Content alignment (center, top_left, etc.)
  • scrollable - Enable scrolling (default: false)
@column {
  flex: 2
  align: center
  scrollable: true
}

Layout patterns

Hero section

@section

@column {
  align: center
}
# Big Title
## Subtitle

Content + visual

@section

@column {
  flex: 2
}
## Feature Description
Detailed explanation...

@column
![Feature Screenshot](image.png)

Three columns

@section

@column
### Option A

@column  
### Option B

@column
### Option C

Key takeaways

  • Start with @column blocks
  • Use @section for side-by-side layouts
  • Control sizing with flex
  • Mix content types freely
  • Layouts adapt to screen size

Next: First Presentation Tutorial

Edit this page on GitHub
First presentation
Custom widgets