Merge pull request #49 from mkobuolys/fix/styling-issues

fix: adjust control widget styling and the default slide background color

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.9.1
+
+- fix: adjust control widget styling and the default slide background color
+
 # 0.9.0
 
 - feat: add `FlutterDeckSlideSize` to set the slide size for the whole presentation

example/lib/main.dart

@@ -56,8 +56,8 @@ class FlutterDeckExample extends StatelessWidget {
         ),
         // Use a custom slide size.
         slideSize: FlutterDeckSlideSize.fromAspectRatio(
-          aspectRatio: const FlutterDeckAspectRatio.ratio16x10(),
-          resolution: const FlutterDeckResolution.fromWidth(1440),
+          aspectRatio: const FlutterDeckAspectRatio.ratio16x9(),
+          resolution: const FlutterDeckResolution.fhd(),
         ),
         // Use a custom transition between slides.
         transition: const FlutterDeckTransition.fade(),

lib/src/flutter_deck_slide.dart

@@ -319,10 +319,7 @@ class FlutterDeckSlide extends StatelessWidget {
   Widget build(BuildContext context) {
     final materialTheme = Theme.of(context);
     final theme = FlutterDeckTheme.of(context).merge(_theme);
-
-    final slideTheme = theme.slideTheme;
-    final backgroundColor = slideTheme.backgroundColor;
-    final color = slideTheme.color;
+    final color = theme.slideTheme.color;
 
     return Theme(
       data: materialTheme.copyWith(
@@ -339,7 +336,6 @@ class FlutterDeckSlide extends StatelessWidget {
             child: FlutterDeckMarker(
               notifier: context.flutterDeck.markerNotifier,
               child: Scaffold(
-                backgroundColor: backgroundColor,
                 drawer: const FlutterDeckDrawer(),
                 body: _SlideBody(child: _builder(context)),
               ),
@@ -381,7 +377,8 @@ class _SlideBody extends StatelessWidget {
         color: Colors.black,
         child: Center(
           child: FittedBox(
-            child: SizedBox(
+            child: Container(
+              color: FlutterDeckTheme.of(context).slideTheme.backgroundColor,
               height: slideSize.height,
               width: slideSize.width,
               child: body,

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

@@ -46,26 +46,9 @@ class FlutterDeckControls extends StatelessWidget {
         children: [
           child!,
           if (controlsNotifier.controlsVisible)
-            Align(
+            const Align(
               alignment: AlignmentDirectional.bottomCenter,
-              child: Container(
-                margin: FlutterDeckLayout.slidePadding,
-                padding: const EdgeInsets.all(4),
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(32),
-                  color: Theme.of(context).colorScheme.surface,
-                ),
-                child: const Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    _PreviousButton(),
-                    _SlideNumberButton(),
-                    _NextButton(),
-                    _MarkerControls(),
-                    _OptionsMenuButton(),
-                  ],
-                ),
-              ),
+              child: _Controls(),
             ),
         ],
       ),
@@ -74,6 +57,42 @@ class FlutterDeckControls extends StatelessWidget {
   }
 }
 
+class _Controls extends StatefulWidget {
+  const _Controls();
+
+  @override
+  State<_Controls> createState() => _ControlsState();
+}
+
+class _ControlsState extends State<_Controls> {
+  @override
+  Widget build(BuildContext context) {
+    return Theme(
+      data: ThemeData.light(),
+      child: Builder(
+        builder: (context) => Container(
+          margin: FlutterDeckLayout.slidePadding,
+          padding: const EdgeInsets.all(4),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(32),
+            color: Theme.of(context).colorScheme.surface,
+          ),
+          child: const Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              _PreviousButton(),
+              _SlideNumberButton(),
+              _NextButton(),
+              _MarkerControls(),
+              _OptionsMenuButton(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
 class _PreviousButton extends StatelessWidget {
   const _PreviousButton();
 
@@ -253,16 +272,25 @@ class _OptionsMenuButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MenuAnchor(
-      builder: (context, controller, child) => IconButton(
-        icon: const Icon(Icons.more_vert_rounded),
-        tooltip: 'Open menu',
-        onPressed: controller.isOpen ? controller.close : controller.open,
+    return MenuButtonTheme(
+      data: MenuButtonThemeData(
+        style: ButtonStyle(
+          backgroundColor: MaterialStatePropertyAll(
+            Theme.of(context).colorScheme.surface,
+          ),
+        ),
+      ),
+      child: MenuAnchor(
+        builder: (context, controller, child) => IconButton(
+          icon: const Icon(Icons.more_vert_rounded),
+          tooltip: 'Open menu',
+          onPressed: controller.isOpen ? controller.close : controller.open,
+        ),
+        menuChildren: const [
+          _ThemeButton(),
+          _MarkerButton(),
+        ],
       ),
-      menuChildren: const [
-        _ThemeButton(),
-        _MarkerButton(),
-      ],
     );
   }
 }

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_deck
 description: A lightweight, customizable, and easy-to-use framework to create presentations in Flutter.
-version: 0.9.0
+version: 0.9.1
 homepage: https://github.com/mkobuolys/flutter_deck
 repository: https://github.com/mkobuolys/flutter_deck
 issue_tracker: https://github.com/mkobuolys/flutter_deck/issues