Global configuration

The global configuration for the slide deck allows you to define the default settings for all slides in your presentation. You can configure the background, controls, footer, header, progress indicator, and more.

Some of these configurations can be overridden on a per-slide basis. For more information, see the Slide configuration guide.

Defining the global configuration

You can define the global configuration by passing a FlutterDeckConfiguration object to the FlutterDeckApp widget.

FlutterDeckApp(
  configuration: const FlutterDeckConfiguration(
    background: FlutterDeckBackgroundConfiguration(
      light: FlutterDeckBackground.solid(Color(0xFFB5FFFC)),
      dark: FlutterDeckBackground.solid(Color(0xFF16222A)),
    ),
    controls: FlutterDeckControlsConfiguration(
      presenterToolbarVisible: true,
      gestures: FlutterDeckGesturesConfiguration.mobileOnly(),
      shortcuts: FlutterDeckShortcutsConfiguration(
        enabled: true,
      ),
    ),
    footer: FlutterDeckFooterConfiguration(
      showFooter: true,
      showSlideNumbers: true,
      showSocialHandle: true,
    ),
    header: FlutterDeckHeaderConfiguration(
      showHeader: false,
    ),
    marker: FlutterDeckMarkerConfiguration(
      color: Colors.cyan,
      strokeWidth: 8.0,
    ),
    progressIndicator: FlutterDeckProgressIndicator.solid(),
    showProgress: true,
    slideSize: FlutterDeckSlideSize.responsive(),
    transition: FlutterDeckTransition.fade(),
  ),
  slides: const [
    // ...
  ],
);

Configuration properties

Background

The background property configures the default background for the slide deck using FlutterDeckBackgroundConfiguration. By default, the background is transparent and the FlutterDeckSlideThemeData.backgroundColor is used.

You can specify different backgrounds for light and dark themes:

const FlutterDeckConfiguration(
  background: FlutterDeckBackgroundConfiguration(
    light: FlutterDeckBackground.solid(Colors.white),
    dark: FlutterDeckBackground.solid(Colors.black),
  ),
)

Note: This configuration cannot be overridden by the slide configuration, but rather by passing a background builder to the specific slide.

Controls

The controls property configures the controls for the slide deck using FlutterDeckControlsConfiguration. By default, the presenter toolbar is visible, the default keyboard controls are enabled, and gestures are enabled on mobile platforms only. For more information, see the Controls guide.

const FlutterDeckConfiguration(
  controls: FlutterDeckControlsConfiguration(
    presenterToolbarVisible: true,
  ),
)

Note: This configuration cannot be overridden by the slide configuration.

The footer property configures the footer component for the slide deck using FlutterDeckFooterConfiguration. By default, the footer is not shown.

const FlutterDeckConfiguration(
  footer: FlutterDeckFooterConfiguration(
    showFooter: true,
    showSlideNumbers: true,
    showSocialHandle: true,
  ),
)

The header property configures the header component for the slide deck using FlutterDeckHeaderConfiguration. By default, the header is not shown.

const FlutterDeckConfiguration(
  header: FlutterDeckHeaderConfiguration(
    showHeader: true,
    title: 'Presentation Title',
  ),
)

Marker

The marker property configures the drawing marker tool using FlutterDeckMarkerConfiguration. By default, the marker is red with a stroke width of 5px.

const FlutterDeckConfiguration(
  marker: FlutterDeckMarkerConfiguration(
    color: Colors.red,
    strokeWidth: 5.0,
  ),
)

Note: This configuration cannot be overridden by the slide configuration.

Progress indicator

The progressIndicator property configures the progress indicator to show in the slide deck using FlutterDeckProgressIndicator. By default, a solid progress indicator with a primary color from the theme is used.

const FlutterDeckConfiguration(
  progressIndicator: FlutterDeckProgressIndicator.gradient(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
  ),
)

Show progress

The showProgress property determines whether to show the presentation progress or not. The default is true.

const FlutterDeckConfiguration(
  showProgress: false,
)

Slide size

The slideSize property configures the size of the slides in the slide deck using FlutterDeckSlideSize. By default, the size is responsive, which means it is not constrained and will adapt to the screen size.

const FlutterDeckConfiguration(
  slideSize: FlutterDeckSlideSize.fromAspectRatio(
    aspectRatio: FlutterDeckAspectRatio.ratio16x9(),
    resolution: FlutterDeckResolution.fhd(),
  ),
)

Note: This configuration cannot be overridden by the slide configuration.

Template overrides

The templateOverrides property allows you to override default slide template configurations using FlutterDeckTemplateOverrideConfiguration.

For more information, see the Template overrides guide.

Transition

The transition property configures the transition to use when navigating between slides. The default transition is FlutterDeckTransition.none().

const FlutterDeckConfiguration(
  transition: FlutterDeckTransition.fade(),
)

For more information, see the Transitions guide.