flutter_deck 0.28.0

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

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_deck/flutter_deck.dart';
import 'package:flutter_deck_example/l10n/l10n.dart';
import 'package:flutter_deck_example/shortcuts/shortcuts.dart';
import 'package:flutter_deck_example/slides/slides.dart';
import 'package:flutter_deck_example/templates/templates.dart';
import 'package:flutter_deck_pdf_export/flutter_deck_pdf_export.dart';
import 'package:flutter_deck_pptx_export/flutter_deck_pptx_export.dart';
import 'package:flutter_deck_web_client/flutter_deck_web_client.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(const FlutterDeckExample());
}

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

  @override
  Widget build(BuildContext context) {
    return FlutterDeckApp(
      client: FlutterDeckWebClient(),
      // You could use the default configuration or create your own.
      configuration: FlutterDeckConfiguration(
        // Define a global background for the light and dark themes separately.
        background: const FlutterDeckBackgroundConfiguration(
          light: FlutterDeckBackground.gradient(
            LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Color(0xFFFEE140), Color(0xFFFA709A)], // Lemon Yellow to Hot Pink
            ),
          ),
          dark: FlutterDeckBackground.gradient(
            LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Color(0xFF000428), Color(0xFF004E92)], // Midnight Blue to Ocean Blue
            ),
          ),
        ),
        // Update controls and add custom shortcuts.
        controls: const FlutterDeckControlsConfiguration(
          shortcuts: FlutterDeckShortcutsConfiguration(customShortcuts: [SkipSlideShortcut()]),
        ),
        // Set defaults for the footer.
        footer: const FlutterDeckFooterConfiguration(showSlideNumbers: true, showSocialHandle: true),
        // Set defaults for the header.
        header: const FlutterDeckHeaderConfiguration(showHeader: false),
        // Override the default marker configuration.
        marker: const FlutterDeckMarkerConfiguration(color: Color(0xFF00E5FF), strokeWidth: 8), // Electric Cyan marker
        // Show progress indicator with specifc gradient and background color.
        progressIndicator: const FlutterDeckProgressIndicator.gradient(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xFF00E5FF), Color(0xFFFA709A)], // Cyan to Hot Pink
          ),
          backgroundColor: Colors.black,
        ),
        // Use a custom slide size.
        slideSize: FlutterDeckSlideSize.fromAspectRatio(
          aspectRatio: const FlutterDeckAspectRatio.ratio16x9(),
          resolution: const FlutterDeckResolution.fhd(),
        ),
        // Override default slide templates.
        templateOverrides: FlutterDeckTemplateOverrideConfiguration(
          titleSlideBuilder: (_, title, subtitle, _, _, _, _) => TitleSlideTemplate(title: title, subtitle: subtitle),
        ),
        // Use a custom transition between slides.
        transition: const FlutterDeckTransition.fade(),
      ),
      // You can also define your own light...
      lightTheme: FlutterDeckThemeData.fromTheme(
        ThemeData.from(
          colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFFF3366)),
          useMaterial3: true,
        ).copyWith(textTheme: GoogleFonts.outfitTextTheme()),
      ),
      // ...and dark themes.
      darkTheme: FlutterDeckThemeData.fromTheme(
        ThemeData.from(
          colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF00E5FF), brightness: Brightness.dark),
          useMaterial3: true,
        ).copyWith(textTheme: GoogleFonts.outfitTextTheme(ThemeData.dark().textTheme)),
      ),
      // Add custom functionality using plugins.
      plugins: [FlutterDeckAutoplayPlugin(), FlutterDeckPptxExportPlugin(), FlutterDeckPdfExportPlugin()],
      // Presentation is build automatically from the list of slides.
      slides: [
        const TitleSlide(),
        const LayoutStructureSlide(),
        const BlankSlide(),
        const SplitSlide(),
        const ImageSlide(),
        const BigFactSlide(),
        const QuoteSlide(),
        const FooterSlide(),
        const HiddenSlide(),
        const DrawerSlide(),
        const MarkerSlide(),
        const ThemingSlide(),
        const BackgroundSlide(),
        const LocalizationSlide(),
        const TransitionsSlide(),
        const StepsSlide(),
        const CodeHighlightSlide(),
        const PresenterSlide(),
        const PluginsSlide(),
        // You can use any widget as a slide.
        const _CounterSlideWidget().withSlideConfiguration(
          const FlutterDeckSlideConfiguration(
            route: '/custom-widget-as-slide',
            title: 'Using custom widgets as slides',
          ),
        ),
        // You can use the FlutterDeckSlide widgets without subclassing them.
        FlutterDeckSlide.title(
          configuration: const FlutterDeckSlideConfiguration(
            route: '/end',
            title: 'Thank you!',
            speakerNotes: '- Please consider using flutter_deck for your next Flutter presentation.',
            footer: FlutterDeckFooterConfiguration(showFooter: false),
          ),
          title: 'Thank you! 👋',
          subtitle: 'Please consider using flutter_deck for your next Flutter presentation.',
        ),
      ],
      // Do not forget to introduce yourself!
      speakerInfo: const FlutterDeckSpeakerInfo(
        name: 'Flutter Deck',
        description: 'The power of Flutter, in your presentations.',
        socialHandle: 'flutter_deck',
        imagePath: 'assets/flutter_logo.png',
      ),
      locale: const Locale('en'),
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
    );
  }
}

class _CounterSlideWidget extends StatefulWidget {
  const _CounterSlideWidget();

  @override
  State<_CounterSlideWidget> createState() => _CounterSlideWidgetState();
}

class _CounterSlideWidgetState extends State<_CounterSlideWidget> {
  var _count = 0;

  void _increment() => setState(() => _count++);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You can use any widget as a slide!', style: FlutterDeckTheme.of(context).textTheme.title),
            const SizedBox(height: 32),
            Transform.scale(
              scale: 2,
              child: FilledButton(onPressed: _increment, child: Text('Click counter: $_count')),
            ),
          ],
        ),
      ),
    );
  }
}