mkobuolys/flutter_deck

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

flutter_deck's Issues

feat: Support for Gradient Linear Progress Indicator

Description

Currently flutter_deck supports only a linear progress indicator with no customization options. So adding support for some animated gradient linear progress indicator can be helpful.

Requirements

[ ] Customization Options for progress indicator
[ ] Changing implementation of Linear Progress Indicator

Additional Context

I am suggesting to use this package for the implementation -

https://pub.dev/packages/simple_animation_progress_bar

@mkobuolys Let me know your thaughts on this.

Add any other context or screenshots about the feature request go here.

bug: splitRatio property inside FlutterDeckSlide.split template

Description

I've got a problem using the splitRatio property inside the FlutterDeckSlide.split template

Steps To Reproduce

Create a FlutterDeckSlide.split template like this:

@override
FlutterDeckSlide build(BuildContext context) {
  return FlutterDeckSlide.split(
    splitRatio: SplitSlideRatio(left: 1,right: 2), // <- this line here
    leftBuilder: (context) {
      return Text('LEFT section');
    },
    rightBuilder: (context) {
      return Text('RIGHT section');
    },
  );
}

Expected Behavior

I expect the property to be recognized and it is possible to create a class of type SplitSlideRatio in which to customize the width of the two columns but I get an error back telling me that:

The method 'SplitSlideRatio' isn't defined for the type 'FlutterWindowManagementSlide'. Try correcting the name to the name of an existing method, or defining a method named 'SplitSlideRatio'.
Type: InvalidType

Additional Info

Tested with:

• flutter_deck version 0.5.0 and 0.6.0
• Flutter (Channel stable, 3.13.7, on Fedora Linux 38 (KDE Plasma) 6.5.6-200.fc38.x86_64, locale it_IT.UTF-8)
• VS Code (version 1.83.1)

docs: change slide color

Description

Currently, it is not documented that you need to overwrite the color argument of a Slide, for example: In the FlutterDeckSplitSlide.

Requirements

• Add a section to change the color or add it in a code block in the readme

feat: add "quote" slide template

Description

Add a new "quote" slide template. Example from Keynote:

This template should support a quote (quote text or title) and the author of a quote (smaller text below). Text styles should be applied from a dedicated slide theme.

Also, make sure that the template supports the footer and header based on the slide deck configuration values, and custom background (see existing templates for reference).

Requirements

• Implement a new slide template
• Implement a new theme for the template
• Add documentation where needed
• Update the example app with the new slide template example
• Update the README.md file with the new slide template example
• Prepare the CHANGELOG.md file for an upcoming release

feat: support for multi-monitors/presentation mode

Description

Presentation programs often provide a "presentation mode", in which the presentation is presented in a specific monitor, while the "main" monitor, usually on the presenter's machine, shows more than the presentation.

For instance:

• The current slide
• The next slide
• A presentation timer
• Notes associated with the current slide
• Other advanced controls

This issue tracks the request to add a presentation mode in flutter_deck

Additional Context

The Presentation Mode, in Microsoft PowerPoint:

The Presenter Console, in LibreOffice Impress:

The Presenter View, in Google Slides:

feat: Ofline Fullscreen Media Slides w/caching

Description
Would be nice to "preload" the deck with dynamic network content while you are online and be able to play the deck while offline.
Able to cache media and data to for use offline

Requirements

• Offline Mode
• Cache Media
• Cache Text
• Play fullscreen videos with content overlays
• Display fullscreen images with content overlays
• Content Overlay
• Custom Gestures

fix: texts are with wrong color on right side in split slide (dark mode)

Description
When using Split slides, the text in the right side in dark mode is really hard to see, the color is to brightness for the background color.

Steps To Reproduce
This code is a slide where I can reproduce:

import 'package:flutter/material.dart';
import 'package:flutter_deck/flutter_deck.dart';

class Renderer extends FlutterDeckSlideWidget {
  const Renderer()
      : super(
          configuration: const FlutterDeckSlideConfiguration(
            route: '/renderer',
            header: FlutterDeckHeaderConfiguration(
              title: 'Web renderers',
            ),
          ),
        );

  @override
  FlutterDeckSlide build(BuildContext context) {
    return FlutterDeckSlide.split(
      leftBuilder: (context) {
        return const Text('HTML renderer');
      },
      rightBuilder: (context) {
        return const Text('CanvasKit renderer');
      },
    );
  }
}

Expected Behavior

The text in the right side should be darker.

Screenshots

Additional Context
I running on a MacOS and Chrome.

feat: add support to export to PDF

Description

Well, it's nice to have a PDF version of the slides both as backup and also printable if needed.

Requirements

• Checklist of requirements to be fulfilled

Additional Context

It's quite common to receive a PDF of slides from another system to to catch up, it's nice to have this feature.

fix: when `enabled: false` in controls config, shortcuts also cease to work

Description

The new control widget introduced in v0.9 is a great addition, but when going to present, it can get in the way.
Thus, when I went to:

          controls: const FlutterDeckControlsConfiguration(
            enabled: false,
            shortcutsEnabled: true,
            openDrawerKey: LogicalKeyboardKey.arrowUp,
            toggleMarkerKey: LogicalKeyboardKey.arrowDown,
          ),

The controls were hidden as expected, but my keyboard shortcuts stopped working (drawer, left/right arrow key, marker).

fix: Controls break after full screen on macOS

Description

The controls no longer work when the app has gone to full screen on macOS. After closing full screen, they still don't work.
I'm using flutter_deck: 0.5.0

Steps To Reproduce

1. Create an example with 2 slides
2. Run app on macOS in debug mode
3. Verify that the default controls (left & right keys) are working
4. Open the app window full screen (green window button or fn + F)
5. The controls no longer work
6. Close the full screen mode again
7. The controls still don't work

Expected Behavior

The controls should work when putting the app full screen and continue to work after closing the full screen mode

flutter doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.6, on macOS 14.0 23A344 darwin-arm64, locale en-BE)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.82.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

The example app in on the main branch has a similar issue, but there it only occurs after closing full screen mode and only when closing with the escape key

1. Run example app
2. Verify that the controls are working
3. Open the app window full screen
4. The controls are still working => wasn't the case with my own example app
5. Close full screen mode with the escape key
6. The controls are no longer working
7. Open full screen mode again
8. The controls are still not working

feat: Rich Text Bullet List Item

Description

Allow some sort of Rich Text / Formatting for Bullet List Items so that in a given Item certain parts can me formatted differently.

So something of the following is possible:

• A list item as is
• With bold statements
• Something in italic
• Some inline code snippet

Maybe only adding support for this formatting set that Github Markdown supports would be possible?

feat: add "big fact" slide template

Description

Add a new "big fact" slide template. Example from Keynote:

This template should support a fact title (big text or title) and an explanation text (subtitle). Text styles should be applied from a dedicated slide theme.

Also, make sure that the template supports the footer and header based on the slide deck configuration values, and custom background (see existing templates for reference).

Requirements

• Implement a new slide template
• Implement a new theme for the template
• Add documentation where needed
• Update the example app with the new slide template example
• Update the README.md file with the new slide template example
• Prepare the CHANGELOG.md file for an upcoming release

docs: add presentation example

Description

Source: https://github.com/mkobuolys/f3-firebase-remote-config-talk
Title: Make smarter decisions faster with Firebase Remote Config
Language: English
Authors: Mangirdas Kazlauskas & Darja Orlova
Socials: https://twitter.com/mkobuolys & https://twitter.com/dariadroid

Requirements

• Provide a link to the source code
• Provide a title for the presentation
• Provide a language of the presentation
• Provide your full name
• Provide a link to your social media profile

feat: add ability to remove padding in the right split for split slides

First off, thank you for this amazing library--it is super, super handy.

I'm currently trying to make a split slide with an interactive view in the right split:

The padding present around my widget in the right split is proving to be a bit problematic and I didn't find any API to disable it on a slide-by-slide basis.

For normal text, the current behavior is fine. However, for images/interactive content like I have here, it limits the usable real estate and can clip content you wouldn't expect (see the image above).

I came up with a workaround using a Stack/Positioned with a negative offset to "eliminate" the left/right padding, but the top/bottom padding depends on screen size and the title, which there is no easy way to workaround. Thus, it'd be nice if there was something at the library level to remove this.

I looked into this briefly, but this looks like it could be challenging based on the current FlutterDeckSlideBase:

    return Stack(
      children: [
        ConstrainedBox(
          constraints: const BoxConstraints.expand(),
          child: backgroundBuilder?.call(context) ?? background,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (headerBuilder != null) headerBuilder!(context),
            Expanded(
              child: contentBuilder?.call(context) ?? const SizedBox.shrink(),
            ),
            if (footerBuilder != null) footerBuilder!(context),
          ],
        ),
      ],
    );

Any ideas on what I can do?

docs: Introdução ao Flutter Web (Introduction to Flutter Web)

Description
This presentation is in pt-br, it was presented at The Developer Conference. The talk is an introduction to the Flutter Web.

Requirements

• Provide a link to the presentation (if deployed): https://afucher.github.io/flutter_web_101
• Provide a link to the source code: https://github.com/afucher/flutter_web_101
• Provide a title for the presentation: Introdução ao Flutter Web (Introduction to Flutter Web)
• Provide your full name: Arthur Fücher

test: add Widget tests for slide templates

Description

Add widget tests for the available slide templates. These tests should check whether the defined slide elements are visible. Also, they should test different slide configuration values (e.g. header and footer visible, custom background set, etc.).

Requirements

• There is no drop in test coverage.

feat: Deck Playlists with auto playback

Description

Say I have 3 decks about cars and 3 decks about food. I would want to be able to play all the car decks on auto play (haha no pun intended). Another time i would want a playlist called Food where it plays all my food decks. And another option to simply play all decks.

Requirements

• Create playlists
• Autoplay
• Loop mode
• Play all decks
• Deck library/catalog

Additional Context

This could become a general media player and be used for TVs

feat: mobile responsiveness support

Summary

First of all , thank you for your consistent work on flutter_deck. I help Deep Tech Girl Foundation to prepare slides to provide teaching git to other teenagers or adult who wants another career path to IT industry.

In case for allowing mobile user to read the slides, I would to like to make requests on

Clearly describe what you are looking to add. The more context the better.

Requirements

• Mobile responsiveness on reading slides on smartphone/ tablets
• Mouse click to left section / right section to more previous / next slide
• Widget Text under social handle section should support html feature to allow user to click
• Add elapsed time count per slides to track speaker on how long the slide has presented.
• Floating button to save a list of questions so that Q And A slides can be dynamically generated to increase interactions.

Additional reminders

I love using this as a means to provide interactive sharing among audience, both for software dev beginners and experts. I would like to see if I can directly folk this project and enhance the slides dependency. This is awesome together with using vercel for fast CI/CD.

feat: support laser pointer

Description

Presentation programs often provide a laser pointer feature, where the operating system cursor disappears and a simulation of laser light is displayed on the slide instead.

This issue tracks the request to add laser pointer support in flutter_deck offering me to work on this issue.

Additional Context

Laser pointer in Microsoft PowerPoint:

Laser pointer in Google Slides:

For my personal use I quickly implemented something functional, it looks like this:

Grabacion.de.pantalla.2023-10-19.a.la.s.20.20.26.mov

feat: Support Nested Bullet Points

Description

When Building Slides I sometimes find it helpful to have nested list

• So I can make a point

  • That has a subpoint
  • With Another Subpoint

• Before doing a point again

• And then later

  • Nest Points again

  I'm not 100% sure how many levels of nested points should be supported. Maybe having something like a FlutterDeckBulletListItem({String title, List<FlutterDeckBulletListItem>? nestedItems}) could be a good start and allow maximum flexibility