Description:

flutter deck

flutter_deck #






A lightweight, customizable, and easy-to-use framework to create presentations in Flutter.
Live demo: https://flutterdeck.dev/demo
🪄 Features #

💙 Slide deck is built as any other Flutter app.
🧭 Navigator 2.0 support - each slide is rendered as an individual page with a deep link to it.
🐾 Steps - each slide can have multiple steps that can be navigated through.
🎓 Presenter view - control your presentation from a separate screen or (even) device.
⚙️ Define a global configuration once and override it per slide if needed.
🚀 Predictable API to access the slide deck state and its methods from anywhere in the app.
📦 Out of the box slide templates, widgets, transitions and controls.
🎨 Custom theming and light/dark mode support.
🌍 Built-in localization support.

📚 Documentation #
The official documentation is available at https://flutterdeck.dev.
📦 Packages #



Package
Pub
Description




flutter_deck

The core package that provides the main functionality to create presentations.


flutter_deck_client

A common client interface and models for the flutter_deck presenter view.


flutter_deck_web_client

A Web client implementation for the flutter_deck presenter view.


flutter_deck_ws_client

A WebSocket client implementation for the flutter_deck presenter view.


flutter_deck_ws_server
-
A WebSocket server for flutter_deck_ws_client implemented using dart_frog.



💻 Installation #
❗ In order to start using flutter_deck you must have the Flutter SDK installed on your machine.
Add flutter_deck to your pubspec.yaml:
dependencies:
flutter_deck:
copied to clipboard
Install it:
flutter packages get
copied to clipboard
👋 Hello flutter_deck! #
Use FlutterDeckApp as your slide deck's root widget and pass a list of FlutterDeckSlideWidget widgets to it:
void main() {
runApp(const FlutterDeckExample());
}

class FlutterDeckExample extends StatelessWidget {
const FlutterDeckExample({super.key});

@override
Widget build(BuildContext context) {
// This is an entry point for the Flutter Deck app.
return FlutterDeckApp(
configuration: const FlutterDeckConfiguration(...),
slides: [
<...>
],
);
}
}
copied to clipboard
Also, you can define a global configuration for your slide deck:
FlutterDeckApp(
configuration: FlutterDeckConfiguration(
background: const FlutterDeckBackgroundConfiguration(
light: FlutterDeckBackground.solid(Color(0xFFB5FFFC)),
dark: FlutterDeckBackground.solid(Color(0xFF16222A)),
),
controls: const FlutterDeckControlsConfiguration(
presenterToolbarVisible: true,
shortcuts: FlutterDeckShortcutsConfiguration(
enabled: true,
nextSlide: SingleActivator(LogicalKeyboardKey.arrowRight),
previousSlide: SingleActivator(LogicalKeyboardKey.arrowLeft),
toggleMarker: SingleActivator(
LogicalKeyboardKey.keyM,
control: true,
meta: true,
),
toggleNavigationDrawer: SingleActivator(
LogicalKeyboardKey.period,
control: true,
meta: true,
),
),
),
footer: const FlutterDeckFooterConfiguration(
showSlideNumbers: true,
widget: FlutterLogo(),
),
header: const FlutterDeckHeaderConfiguration(
showHeader: false,
),
marker: const FlutterDeckMarkerConfiguration(
color: Colors.cyan,
strokeWidth: 8.0,
),
progressIndicator: const FlutterDeckProgressIndicator.gradient(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.pink, Colors.purple],
),
backgroundColor: Colors.black,
),
slideSize: FlutterDeckSlideSize.fromAspectRatio(
aspectRatio: const FlutterDeckAspectRatio.ratio16x10(),
resolution: const FlutterDeckResolution.fromWidth(1440),
),
transition: const FlutterDeckTransition.fade(),
),
<...>
);
copied to clipboard
Use any colors you like:
FlutterDeckApp(
lightTheme: FlutterDeckThemeData.light(),
darkTheme: FlutterDeckThemeData.dark(),
themeMode: ThemeMode.system,
<...>
);
copied to clipboard
And do not forget to introduce yourself!
FlutterDeckApp(
speakerInfo: const FlutterDeckSpeakerInfo(
name: 'John Doe',
description: 'CEO of flutter_deck',
socialHandle: '@john_doe',
imagePath: 'assets/me.png',
),
<...>
);
copied to clipboard
🧑‍💻 Maintainers #

Mangirdas Kazlauskas

License

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

Share

• Share on Facebook
• Share on Twitter