mkobuolys / flutter_deck

A lightweight, customizable, and easy-to-use framework to create presentations in Flutter.
https://pub.dev/packages/flutter_deck
MIT License
177 stars 25 forks source link
dart flutter framework package presentation slides

flutter_deck

Pub Version GitHub Actions Workflow Status GitHub Repo stars License: MIT flutter_deck docs FlutterDeck Header

A lightweight, customizable, and easy-to-use framework to create presentations in Flutter.

Live demo: https://flutterdeck.dev/demo

🪄 Features

📚 Documentation

The official documentation is available at https://flutterdeck.dev.

📦 Packages

Package Pub Description
flutter_deck Pub Version The core package that provides the main functionality to create presentations.
flutter_deck_client Pub Version A common client interface and models for the flutter_deck presenter view.
flutter_deck_web_client Pub Version A Web client implementation for the flutter_deck presenter view.
flutter_deck_ws_client Pub Version 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 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: [
        <...>
      ],
    );
  }
}

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