feat: add flutter deck controls widget, update example slides

CHANGELOG.md

@@ -1,6 +1,7 @@
 # NEXT
 
 - feat: add `FlutterDeckSlideSize` to set the slide size for the whole presentation
+- feat: add flutter deck controls widget
 - ci: update the example's base url for GitHub Pages deployment
 
 # 0.8.0

README.md

@@ -770,13 +770,13 @@ Widget build(BuildContext context) {
 
 ## Navigation drawer
 
-Every slide deck comes with a navigation drawer that can be used to navigate through the slide deck. The navigation drawer is automatically generated based on the slide deck configuration. From the drawer, you can change the current theme mode, or go to a specific slide.
+Every slide deck comes with a navigation drawer that can be used to navigate through the slide deck. The navigation drawer is automatically generated based on the slide deck configuration.
 
 ![Navigation demo](https://github.com/mkobuolys/flutter_deck/blob/main/images/navigation.gif?raw=true)
 
 ## Marker tool
 
-The marker tool allows you to draw on top of the slide. It can be used to highlight specific parts of the slide, or to draw anything you want. The tool is available in the navigation drawer, or just press "M" on your keyboard (it's also possible to specify a custom key binding for the `toggleMarkerKey` property in `FlutterDeckControlsConfiguration`).
+The marker tool allows you to draw on top of the slide. It can be used to highlight specific parts of the slide, or to draw anything you want. The tool is available in the deck controls, or just press "M" on your keyboard (it's also possible to specify a custom key binding for the `toggleMarkerKey` property in `FlutterDeckControlsConfiguration`).
 
 ![Marker demo](https://github.com/mkobuolys/flutter_deck/blob/main/images/marker.gif?raw=true)
 

example/lib/slides/background_slide.dart

@@ -13,12 +13,27 @@ class BackgroundSlide extends FlutterDeckSlideWidget {
   @override
   FlutterDeckSlide build(BuildContext context) {
     return FlutterDeckSlide.blank(
+      backgroundBuilder: (context) {
+        final isDark = Theme.of(context).brightness == Brightness.dark;
+
+        return Container(
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+              colors: isDark
+                  ? [Colors.blue.shade900, Colors.blue.shade600]
+                  : [Colors.yellow.shade100, Colors.blueGrey.shade50],
+            ),
+          ),
+        );
+      },
       builder: (context) => Center(
         child: Text(
           'It is possible to define a global background for the light and dark '
           'themes separately. The background could be a solid color, gradient, '
           'image or any custom widget. Of course, you can override it later '
-          'for each slide, too.\n\nToggle dark mode to see this in action',
+          'for each slide, too.',
           style: FlutterDeckTheme.of(context).textTheme.bodyMedium,
           textAlign: TextAlign.center,
         ),

example/lib/slides/drawer_slide.dart

@@ -16,10 +16,11 @@ class DrawerSlide extends FlutterDeckSlideWidget {
       builder: (context) => Center(
         child: Text(
           'Did you know that flutter_deck supports navigation drawer? Just '
-          'press "." on your keyboard to open it!\n\nThere, you can toggle the '
-          'dark mode or navigate to any other slide straight away.\n\nOh, and '
-          'if you want to override default keyboard bindings, you can do it in '
-          'the FlutterDeckConfiguration, under controls.',
+          'press "." on your keyboard or press the slide number button in the '
+          'deck controls to open it!\n\nThere, you can navigate to any other '
+          'slide straight away.\n\nOh, and if you want to override default '
+          'keyboard bindings, you can do it in the FlutterDeckConfiguration, '
+          'under controls.',
           style: FlutterDeckTheme.of(context).textTheme.bodyMedium,
           textAlign: TextAlign.center,
         ),

example/lib/slides/footer_slide.dart

@@ -24,8 +24,7 @@ class FooterSlide extends FlutterDeckSlideWidget {
         child: Text(
           'This showcases the usage of a custom footer widget using a row '
           'of multiple widgets for the footer (this also overrides the social '
-          'handle. showSocialHandle is true but since widget is not '
-          'null, widget is displayed.).',
+          'handle).',
           style: FlutterDeckTheme.of(context).textTheme.bodyMedium,
           textAlign: TextAlign.center,
         ),

example/lib/slides/marker_slide.dart

@@ -20,11 +20,11 @@ class MarkerSlide extends FlutterDeckSlideWidget {
           children: [
             Text(
               'If you want to highlight something, you can use the marker '
-              'tool. The tool is available in the navigation drawer, or just '
-              'press "M" on your keyboard (you can override it if needed). You '
-              'can also update the marker color and stroke width in the global '
-              'configuration.\n\nTry out the tool by drawing a face for this '
-              'good boi!',
+              'tool. The tool is available in the options menu in the deck '
+              'controls, or press "M" on your keyboard. The keyboard binding '
+              'can be overridden in the configuration.\n\nYou can also update '
+              'the marker color and stroke width in the global configuration.'
+              '\n\nTry out the tool by drawing a face for this good boi!',
               style: FlutterDeckTheme.of(context).textTheme.bodyMedium,
               textAlign: TextAlign.center,
             ),

example/lib/slides/title_slide.dart

@@ -14,7 +14,7 @@ class TitleSlide extends FlutterDeckSlideWidget {
   FlutterDeckSlide build(BuildContext context) {
     return FlutterDeckSlide.title(
       title: 'Welcome to flutter_deck example! 🚀',
-      subtitle: 'Use left and right arrow keys to navigate.',
+      subtitle: 'Use slide deck controls to navigate.',
     );
   }
 }

lib/src/flutter_deck_app.dart

@@ -158,7 +158,7 @@ class _FlutterDeckAppState extends State<FlutterDeckApp> {
             drawerNotifier: _drawerNotifier,
             markerNotifier: _markerNotifier,
             themeNotifier: _themeNotifier,
-            child: FlutterDeckControls(
+            child: FlutterDeckControlsListener(
               notifier: _controlsNotifier,
               child: FlutterDeckTheme(
                 data: theme,

lib/src/flutter_deck_slide.dart

@@ -335,12 +335,14 @@ class FlutterDeckSlide extends StatelessWidget {
       child: FlutterDeckTheme(
         data: theme.copyWith(textTheme: theme.textTheme.apply(color: color)),
         child: Builder(
-          builder: (context) => FlutterDeckMarker(
-            notifier: context.flutterDeck.markerNotifier,
-            child: Scaffold(
-              backgroundColor: backgroundColor,
-              drawer: const FlutterDeckDrawer(),
-              body: _SlideBody(child: _builder(context)),
+          builder: (context) => FlutterDeckControls(
+            child: FlutterDeckMarker(
+              notifier: context.flutterDeck.markerNotifier,
+              child: Scaffold(
+                backgroundColor: backgroundColor,
+                drawer: const FlutterDeckDrawer(),
+                body: _SlideBody(child: _builder(context)),
+              ),
             ),
           ),
         ),

lib/src/widgets/internal/controls/controls.dart

@@ -1,2 +1,3 @@
 export 'flutter_deck_controls.dart';
+export 'flutter_deck_controls_listener.dart';
 export 'flutter_deck_controls_notifier.dart';