Examples
Real-world examples showcasing SuperDeck's features and capabilities
Examples
Explore these real-world examples that demonstrate SuperDeck's capabilities. All examples come 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
}
@block {
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
@block {
flex: 2
align: centerLeft
}
### Generative UI
@block
### VS
@block {
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.
@block
```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
@block
```dart
final schema = Schema.object(properties: {
'name': Schema.string(
description: 'The text content to display on color palette. Format: #FF0000',
nullable: false,
),
'font': Schema.enumValues(
enumValues: ColorPaletteFontFamily.values,
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 hero animation
@block
 {.cover}
---
Features shown:
- External image URLs
- Hero class for cross-slide animation (see hero classes)
- Full-width image display
Mixed content layout
@section
@block
```dart
void main() {
print('Hello, SuperDeck!');
}
```
@block
 {.cover}
---
Features shown:
- Side-by-side content
- Mixed media types
DartPad integration
@block
 {.cover}
@dartpad {
id: "sample_dartpad_id"
theme: dark
run: true
}
@block
## 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
}
@block {
align: center
flex: 1
}
```dart
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: spans.map((span) {
return RichText(
text: TextSpan(
style: interpolatedSpec.textStyle,
children: [span],
),
);
}).toList(),
)
```
@block
 {.cover}
---
Features shown:
- Nested sections
- Complex flex layouts
- Multiple content types
Profile and bio layout
@section
@block {
align: centerRight
}
#### Leo Farias
@leoafarias
@block {
align: centerLeft
}
- 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
@block {
align: centerLeft
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
@block
Try the interactive counter:
@block
@widget {
name: "counter"
start: 10
step: 5
label: "Demo Counter"
}
Features shown:
- Stateful custom widget
- Multiple argument types (int, string)
- Interactive user interface elements
Hero classes
# Important Heading {.heading}
## Subtitle Content {.subheading}
Regular content here.
Some special text {.here}
```dart
void main() {
print('Styled code block');
}
``` {.code}
Features shown:
- Hero class markers for cross-slide animation
- Per-element animation control
- Consistent visual transitions
Feature announcement
@block {
flex: 3
align: center
}
### Flutter is Well-Suited
### for Generative UI
Built for any screen: Ideal for generating
adaptive UIs across devices and platforms.
@block
---
Technical explanation
@section
@block
### Structured Output
@block
```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
- Interactive demos with DartPad and custom widgets
- Mixed media combining images, text, and code
These examples demonstrate common patterns in SuperDeck's block-based layout system.