# Mkobuolys Flutter Deck Flutter Deck Configuration > Configuring Flutter Deck - Skill: `tomevault-io/mkobuolys-flutter-deck-flutter-deck-configuration` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/mkobuolys-flutter-deck-flutter-deck-configuration` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/mkobuolys-flutter-deck-flutter-deck-configuration/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/mkobuolys-flutter-deck-flutter-deck-configuration --- # Configuring Flutter Deck ## Overview `flutter_deck` provides a highly flexible configuration system structured at two levels: global configuration and slide-level configuration overrides. - **Global Configuration** (`FlutterDeckConfiguration`): Defines the baseline rules for the entire presentation, such as the default background, transition animations, control settings (e.g., keyboard shortcuts), and whether universal headers, footers, or progress indicators are visible. - **Slide-Level Configuration** (`FlutterDeckSlideConfiguration`): Defines requirements specific to a single slide. Every slide must specify a unique routing path (`route`) and can optionally override parts of the global configuration (like hiding the footer for a specific slide or adding a custom title). ## When to Use This Skill - When initializing the presentation in `main.dart` and setting the default look, feel, and navigation behaviors. - When turning on/off presenter toolbars, marker tools, and default keyboard shortcuts. - When setting specific metadata for a slide, such as `speakerNotes` or `preloadImages`. - When a specific slide needs to break global layout rules (e.g., hiding the global header just for the title slide). ## Implementation Checklist - [ ] Define the global `FlutterDeckConfiguration` when instantiating `FlutterDeckApp`. - [ ] Choose the global `slideSize` constraint (e.g., responsive versus a fixed 16:9 ratio). - [ ] Setup the global `controls`, `footer`, `header`, `progressIndicator`, `transition`, and `background`. - [ ] For every new slide, instantiate a `FlutterDeckSlideConfiguration` with a unique `route`. - [ ] If a slide needs to hide universal elements (like the footer or progress bar), pass the appropriate override configurations (e.g., `footer: FlutterDeckFooterConfiguration(showFooter: false)`). - [ ] (Optional) Provide `preloadImages` for slides with heavy assets to prevent loading pop-in. --- ## Global Configuration Example The global configuration is provided when initializing `FlutterDeckApp`. ```dart FlutterDeckApp( configuration: FlutterDeckConfiguration( background: const FlutterDeckBackgroundConfiguration( light: FlutterDeckBackground.solid(Color(0xFFB5FFFC)), dark: FlutterDeckBackground.solid(Color(0xFF16222A)), ), controls: const FlutterDeckControlsConfiguration( presenterToolbarVisible: true, gestures: FlutterDeckGesturesConfiguration.mobileOnly(), shortcuts: FlutterDeckShortcutsConfiguration(enabled: true), ), footer: const FlutterDeckFooterConfiguration(showFooter: true, showSlideNumbers: true, showSocialHandle: true), header: const FlutterDeckHeaderConfiguration(showHeader: false), marker: const FlutterDeckMarkerConfiguration(color: Colors.cyan, strokeWidth: 8.0), progressIndicator: const FlutterDeckProgressIndicator.solid(), showProgress: true, slideSize: FlutterDeckSlideSize.fromAspectRatio( aspectRatio: const FlutterDeckAspectRatio.ratio16x9(), resolution: const FlutterDeckResolution.fhd(), ), transition: const FlutterDeckTransition.fade(), ), slides: const [ // Your slides here ], ) ``` ## Slide-level Configuration Overrides You can override most global configurations for a specific slide via `FlutterDeckSlideConfiguration`. The fields that **can** be overridden per slide are `footer`, `header`, `progressIndicator`, `showProgress`, and `transition`. The fields that are **globally locked** (the global value always wins, even if you pass one to the slide constructor) are `background`, `controls`, `marker`, `slideSize`, and `templateOverrides`. ```dart class MySpecialSlide extends FlutterDeckSlideWidget { const MySpecialSlide() : super( configuration: const FlutterDeckSlideConfiguration( route: '/special', title: 'Special Slide', // Overrides global settings: header: FlutterDeckHeaderConfiguration(showHeader: false), footer: FlutterDeckFooterConfiguration(showFooter: false), showProgress: false, transition: FlutterDeckTransition.rotation(), ), ); @override FlutterDeckSlide build(BuildContext context) { return FlutterDeckSlide.blank( builder: (context) => const Center(child: Text('Look Ma, no header!')), ); } } ``` ## Available Transitions - `FlutterDeckTransition.none()` (default) - `FlutterDeckTransition.fade()` - `FlutterDeckTransition.scale()` - `FlutterDeckTransition.slide()` - `FlutterDeckTransition.rotation()` - `FlutterDeckTransition.custom(transitionBuilder: ...)` ## Backgrounds `FlutterDeckBackgroundConfiguration` accepts a separate `light:` and `dark:` background. Each is built with one of these factories: - `FlutterDeckBackground.solid(Color)` — a flat color. - `FlutterDeckBackground.gradient(Gradient)` — any `LinearGradient` / `RadialGradient` / `SweepGradient`. - `FlutterDeckBackground.image(Image)` — an `Image` widget covering the slide. - `FlutterDeckBackground.custom(child: Widget)` — any widget tree. - `FlutterDeckBackground.transparent()` — falls back to `FlutterDeckSlideThemeData.backgroundColor`. ```dart background: const FlutterDeckBackgroundConfiguration( light: FlutterDeckBackground.gradient( LinearGradient(colors: [Color(0xFFFEE140), Color(0xFFFA709A)]), ), dark: FlutterDeckBackground.gradient( LinearGradient(colors: [Color(0xFF000428), Color(0xFF004E92)]), ), ), ``` ## Progress Indicator Two factories on `FlutterDeckProgressIndicator`: - `FlutterDeckProgressIndicator.solid({Color? color, Color? backgroundColor})` — a flat bar. - `FlutterDeckProgressIndicator.gradient({required Gradient gradient, Color? backgroundColor})` — a gradient bar. ```dart progressIndicator: const FlutterDeckProgressIndicator.gradient( gradient: LinearGradient(colors: [Color(0xFF00E5FF), Color(0xFFFA709A)]), backgroundColor: Colors.black, ), ``` ## Custom Keyboard Shortcuts Pass a list of `FlutterDeckShortcut` subclasses to `FlutterDeckShortcutsConfiguration.customShortcuts`. Each shortcut binds keyboard activators to an `Intent` + `Action`. ```dart controls: const FlutterDeckControlsConfiguration( shortcuts: FlutterDeckShortcutsConfiguration( customShortcuts: [SkipSlideShortcut()], ), ), ``` To disable all shortcuts globally, use `FlutterDeckShortcutsConfiguration.disabled()`. ## Replacing Built-in Slide Templates `FlutterDeckTemplateOverrideConfiguration` lets you swap the rendering of *all* built-in slide factories deck-wide. Provide a builder for any of: `bigFactSlideBuilder`, `blankSlideBuilder`, `imageSlideBuilder`, `quoteSlideBuilder`, `splitSlideBuilder`, `templateSlideBuilder`, `titleSlideBuilder`. Any unset builder keeps the framework default. ```dart templateOverrides: FlutterDeckTemplateOverrideConfiguration( titleSlideBuilder: (_, title, subtitle, _, _, _, _) => MyTitleSlideTemplate(title: title, subtitle: subtitle), ), ``` Use this when every slide of a given factory needs identical custom chrome — it's faster than wrapping each slide individually and applies even when slides are constructed via `FlutterDeckSlide.title(...)` directly. ## Useful Properties - `route`: The unique path for the slide. (Required) - `title`: The title shown in the navigation drawer. - `speakerNotes`: Notes visible only in the presenter view. - `hidden`: If `true`, the slide is removed from navigation flow. - `initial`: If `true`, the presentation starts here (useful for web routing without a path). - `preloadImages`: A `Set` of asset paths/URLs to load before the slide displays. - `steps`: The number of internal steps the slide has. It is useful for building animations or revealing content sequentially on a single slide. By default `1`. ## Gotchas - `background`, `controls`, `marker`, `slideSize`, and `templateOverrides` are **globally locked**. Passing them to a slide's `FlutterDeckSlideConfiguration` is silently ignored — `mergeWithGlobal` always copies the global value. Configure these only on `FlutterDeckApp.configuration`. - Per-slide overrides that actually take effect: `footer`, `header`, `progressIndicator`, `showProgress`, `transition`. - Routes must be unique across the deck and start with `/`. Duplicate routes fail at startup. - `steps` defaults to `1` (one tap advances to the next slide). For sequential reveals on a single slide, set `steps: N` so the slide consumes `N` next-key presses before advancing. - Set `initial: true` on exactly one slide to define the entry point when the deck is opened without a path in the URL — useful for web hosting. - `preloadImages` accepts both asset paths and remote URLs. Use it on every slide whose image would otherwise visibly pop in. --- > Source: [mkobuolys/flutter_deck](https://github.com/mkobuolys/flutter_deck) — distributed by [TomeVault](https://tomevault.io).