Description:

superdeck

SuperDeck enables you to craft visually appealing and interactive presentations directly within your Flutter apps, using the simplicity and power of Markdown.

View demo here #
Example code #
Getting Started #
Follow these steps to integrate SuperDeck into your Flutter project:


Install the superdeck package by running the following command:
flutter pub add superdeck
copied to clipboard


Import the superdeck package in your Dart code:
import 'package:superdeck/superdeck.dart';
copied to clipboard


Initialize SuperDeck and run the app.
void main() {
runApp(const SuperDeckApp());
}
copied to clipboard


Create a slides.md file at the root of your project.


Configure your pubspec.yaml file to include the necessary assets:
flutter:
assets:
- assets/
- assets/images/
copied to clipboard


The assets directory is used to slide and asset references, while the assets/images directory is specifically used for storing images used in your presentations.

Configure your app

MacOS
Change your Release.entitlements
<dict>
<key>com.apple.security.app-sandbox</key>
<false/>
<key>com.apple.security.network.client</key>
<true/>
</dict>
copied to clipboard
Change DebugProfile.entitlements
<dict>
<key>com.apple.security.app-sandbox</key>
<false/>
<key>com.apple.security.cs.allow-jit</key>
<true/>
<key>com.apple.security.network.server</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
</dict>
copied to clipboard

Start building your slides in the slides.md file using Markdown syntax and SuperDeck's slide templates and configurations.

SuperDeck Options #
style
SuperDeck provides a robust styling system by leveraging Mix, This allows a complete control by creating endless possibility of defining styling every element in teh slide, and also creating style variants.
examples
These are widget examples that can be referenced in the slide. You can read more about how to reference these examples in the Widget Template section.
SuperDeckApp(
style: style,
examples: [
Example(
name: 'demo',
builder: (args) {
return CustomWidget();
},
),
],
);
copied to clipboard
Shared Slide Options #
Some shared options can be applied by adding them to a superdeck.yaml file in the root of your project. These options will be applied to all slides unless overridden by slide-specific options.
Slide Options #
The following options are available for configuring each slide. All options are optional.
Shared Options
Some shared options can be applied by adding them to a superdeck.yaml file in the root of your project. These options will be applied to all slides unless overridden by slide-specific options.
title
The title of the slide.
background
The background image that will be displayed on the slide. You can use a URL or a local asset path.
content
The markdown content of the slide. This is where you write the main content of the slide using Markdown syntax.

alignment: The alignment of the slide content.
flex: The flex value of the slide content. This determines how much space the content occupies relative to other content on the slide.

style
This is the style variants that will be applied to the slide. You can define style variants by using Mix and pass them to the SuperDeck constructor.
transition
The transition effect to be applied when navigating to the slide.

type: The type of transition effect.
duration: The duration of the transition effect in milliseconds.
delay: The delay before the transition effect starts in milliseconds.
curve: The curve of the transition effect.

layout
Selects a slide layout template. Available options include: simple, two_column, two_column_header, image, and widget.
Templates #
SuperDeck provides a diverse collection of templates, each designed to meet different presentation needs. From simple text slides to complex layouts with images and columns, you can easily find the right template for your content.
Simple Template (default) #
A straightforward template for your presentations.
---
background: https://source.unsplash.com/random/900×700/?landscape
---

# Introduction to SuperDeck

Create **engaging**, **customizable** presentations within your Flutter app.
copied to clipboard
Two-Column Template #
Ideal for presenting comparative or complementary information side by side.
---
layout: two_column
---

::left::

# Product A
- Feature 1
- Feature 2

::right::

# Product B
- Feature X
- Feature Y
copied to clipboard
Sections

::left::: The content that will be placed in the left column.
::right::: The content that will be placed in the right column.

If the first tag that is found is ::right:: everything before this tag will be placed on the ::left:: section.
You can control the content options for each section on the front matter of the slide.
sections:
left:
flex: 2
alignment: center_left
right:
flex: 1
alignment: center_right
copied to clipboard
Read more about on the content options section.
Two-Column Header Template #
Similar to the two-column template, but with an additional header section at the top of the slide.
---
layout: two_column_header
---

::header::

# Product Comparison

::left::

## Product A
- Feature 1
- Feature 2
- Feature 3

::right::

## Product B
- Feature X
- Feature Y
- Feature Z
copied to clipboard
Sections

::header::: The content that will be placed in the header section.
::left::: The content that will be placed in the left column.
::right::: The content that will be placed in the right column.

If the first tag that is found is ::left::, everything before this tag will be placed in the ::header:: section.
You can control the content options for each section in the front matter of the slide.
sections:
header:
flex: 2
alignment: top_right
left:
flex: 2
alignment: center_left
right:
flex: 1
alignment: center_right
copied to clipboard
Keep in mind that you can also control the flex of the left and right sections by using the content property.
Read more about it in the content options section.
Image Template #
Display an image alongside the slide content.
---
layout: image
options:
src: https://source.unsplash.com/random/900×700/?nature
fit: cover
position: left
---

# Key Features

- Innovative design
- User-friendly
- Energy-efficient
copied to clipboard
The options property specifies the image to be displayed. It has the following sub-options:

src: The URL or path to the image file.
fit: How the image should be fitted within the slide.
position: The position of the image relative to the slide content.

Widget Template #
Embed a custom widget within the slide.
---
layout: widget
options:
name: demo
position: center
flex: 1
args:
customArg: value
customArg2: value2
---

# Custom Widget

This slide contains a custom widget.
copied to clipboard
The options property specifies the widget to be embedded. It has the following sub-options:

name: The name of the widget.
position: The position of the widget relative to the slide content.
flex: The flex value of the widget.
args: Additional arguments to be passed to the widget.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter