Examples
Real-world examples showcasing SuperDeck's features and capabilities
Examples
Explore these real-world examples that demonstrate SuperDeck's capabilities. All examples are taken from actual SuperDeck presentations.
Centered title slide
Use this for opening slides, section dividers, or any slide where you want the title to be the focal point.
@section {
flex: 2
}
@column {
align: center
}
# Generative UI
# with Flutter
---
Features shown:
- Section with flexible sizing
- Centered content alignment
- Multi-line headings
Two-column content
Use this for comparisons, pros/cons lists, or showing two related concepts side-by-side.
@section
@column {
flex: 2
align: center_left
}
### Generative UI
@column
### VS
@column {
flex: 2
}
### AI Assisted Code Generation
---
Features shown:
- Flexible column sizing with
flex - Mixed alignment options
- Comparative layouts
Syntax highlighted code blocks
Use this when demonstrating code snippets, API usage, or implementation details.
@column
```dart
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: spans.map((span) {
return RichText(
text: TextSpan(
style: interpolatedSpec.textStyle,
children: [span],
),
);
}).toList(),
)
```
---
Features shown:
- Dart syntax highlighting
- Clean code formatting
- Single-column layout for code
Complex schema definition
@column
```dart
final schema = Schema.object(properties: {
'name': Schema.string(
description: 'The text content to display on color palette. Format: #FF0000',
nullable: false,
),
'font': Schema.enumString(
enumValues: ColorPaletteFontFamily.enumString,
description: 'The font to use for the poster text.',
nullable: false,
),
'fontColor': Schema.string(
description: 'The hex color value of the poster text. Format: #FF0000',
nullable: false,
),
// ... more properties
});
```
---
Image with cover fit
@column
 {.cover}
---
Features shown:
- External image URLs
- CSS class for image fitting
- Full-width image display
Mixed content layout
@section
@column
```mermaid
graph TD
A[Start] --> B[Input]
B --> C[Process]
C --> D[Output]
D --> E[End]
```
@column
 {.cover}
---
Features shown:
- Mermaid diagram integration
- Side-by-side content
- Mixed media types
DartPad integration
@column
 {.cover}
@dartpad {
id: "sample_dartpad_id"
theme: dark
run: true
}
@column
## Interactive Demo
---
Features shown:
- DartPad embedding
- Multi-block layouts
- Interactive code examples
Custom widget integration
@widget {
name: "twitter"
username: "flutter_dev"
tweetId: "1746481414112256000"
theme: "dark"
}
Features shown:
- Custom widget embedding with
@widgetblock - Named widget registration (
name: "twitter") - Multiple arguments passed to widget
- External data integration
Complex multi-section layout
@section
@section {
flex: 2
}
@column {
align: center
flex: 1
}
```dart
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: spans.map((span) {
return RichText(
text: TextSpan(
style: interpolatedSpec.textStyle,
children: [span],
),
);
}).toList(),
)
```
@column
 {.cover}
---
Features shown:
- Nested sections
- Complex flex layouts
- Multiple content types
Profile and bio layout
@section
@column {
align: center_right
}
#### Leo Farias
@leoafarias
@column {
align: center_left
}
- Founder/CEO/CTO
- Open Source Contributor
- Flutter & Dart GDE
- Passionate about UI/UX/DX
---
Features shown:
- Split personality layout
- Alignment-based design
- Professional bio formatting
GitHub-style alerts
@column {
align: center_left
flex: 2
}
> [!WARNING]
> This presentation contains live AI-generated content. Unexpected things may occur during the demonstration.
---
Features shown:
- GitHub-style alert syntax
- Warning callouts
- Flexible column sizing
Generative UI demo
@widget {
name: "colorPalette"
schema: true
prompts: [tropical, vibrant, pastel, chocolatey pink unicorn, cyberpunk]
}
Features shown:
- Custom widget with complex arguments (
@widgetblock) - Array data passed as arguments
- AI-generated content integration
- Interactive demonstrations
Interactive counter widget
@section
@column
Try the interactive counter:
@column
@widget {
name: "counter"
start: 10
step: 5
label: "Demo Counter"
}
Features shown:
- Stateful custom widget
- Multiple argument types (int, string)
- Interactive user interface elements
Process flow
@column
```mermaid
graph TD
A[Start] --> B[Input]
B --> C[Process]
C --> D[Output]
D --> E[End]
```
## Process Overview
Simple workflow representation using Mermaid syntax.
---
Features shown:
- Mermaid diagram integration
- Automatic diagram rendering
- Process visualization
Custom CSS classes
# Important Heading {.heading}
## Subtitle Content {.subheading}
Regular content here.
Some special text {.here}
```dart
void main() {
print('Styled code block');
}
``` {.code}
Features shown:
- CSS class application
- Custom styling hooks
- Consistent visual theming
Feature announcement
@column {
flex: 3
align: center
}
### Flutter is Well-Suited
### for Generative UI
Built for any screen: Ideal for generating
adaptive UIs across devices and platforms.
@column
---
Technical explanation
@section
@column
### Structured Output
@column
```dart
final schema = Schema.array(
description: 'List of recipes',
items: Schema.object(
properties: {
'recipeName': Schema.string(
description: 'Name of the recipe.',
nullable: false,
),
},
requiredProperties: ['recipeName'],
),
);
```
---
Best practices shown
- Flexible Layouts - Use
flexproperties to control space distribution - Mixed Content - Combine text, images, code, and widgets effectively
- Alignment Control - Use alignment for visual balance and hierarchy
- Code Integration - Showcase code examples with proper syntax highlighting
- Interactive Elements - Include DartPad and custom widgets for engagement
- Visual Hierarchy - Use sections and columns to guide attention
- External Content - Integrate images, social media, and external resources
Common patterns
- Hero sections with centered content and large text
- Side-by-side comparisons using two-column layouts
- Code + explanation layouts with code in one column, description in another
- Process flows using Mermaid diagrams
- Interactive demos with DartPad and custom widgets
- Mixed media combining images, text, and code
These examples demonstrate the flexibility and power of SuperDeck's block-based system for creating engaging, interactive presentations.