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:

Install it:

flutter packages get

👋 Hello flutter_deck!

Use FlutterDeckApp as your slide deck's root widget and pass a list of widgets as slides:

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: [
        <...>
      ],
    );
  }
}

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(),
  ),
  <...>
);

Use any colors you like:

FlutterDeckApp(
  lightTheme: FlutterDeckThemeData.light(),
  darkTheme: FlutterDeckThemeData.dark(),
  themeMode: ThemeMode.system,
  <...>
);

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',
  ),
  <...>
);

🧑‍💻 Maintainers

• Mangirdas Kazlauskas