Merge branch 'main' of github.com:mkobuolys/flutter_deck

CHANGELOG.md

@@ -1,6 +1,7 @@
-# NEXT
+# 0.11.0
 
 - feat: set scroll position to currently active slide on navigation drawer open
+- fix: FlutterDeckBulletList scaling issues
 
 # 0.10.1
 

README.md

@@ -412,6 +412,32 @@ class CustomSlide extends FlutterDeckSlideWidget {
 }
 ```
 
+## Generating slides
+
+This package comes with a [mason][mason_link] template that can be used to generate a new slide for the slide deck.
+
+Ensure you have the [mason_cli][mason_cli_link] installed:
+
+```sh
+dart pub global activate mason_cli
+```
+
+Install the [flutter_deck_slide][flutter_deck_slide_brick] template:
+
+```sh
+# Install locally
+mason add flutter_deck_slide
+
+# Install globally
+mason add -g flutter_deck_slide
+```
+
+Generate a new slide:
+
+```sh
+mason make flutter_deck_slide
+```
+
 ## Theming
 
 You can customize the theme of your slide deck by providing a `FlutterDeckThemeData` to the `FlutterDeckApp` widget:
@@ -847,32 +873,6 @@ The auto-play feature allows you to automatically navigate through the slide dec
 
 ![Auto-play demo](https://github.com/mkobuolys/flutter_deck/blob/main/images/autoplay.gif?raw=true)
 
-## Generating slides
-
-This package comes with a [mason][mason_link] template that can be used to generate a new slide for the slide deck.
-
-Ensure you have the [mason_cli][mason_cli_link] installed:
-
-```sh
-dart pub global activate mason_cli
-```
-
-Install the [flutter_deck_slide][flutter_deck_slide_brick] template:
-
-```sh
-# Install locally
-mason add flutter_deck_slide
-
-# Install globally
-mason add -g flutter_deck_slide
-```
-
-Generate a new slide:
-
-```sh
-mason make flutter_deck_slide
-```
-
 ## Presentations built with flutter_deck 🚀
 
 | Title                                                                                                                                                           | Language   | Author                                                                                       |

lib/src/widgets/flutter_deck_bullet_list.dart

@@ -44,7 +44,7 @@ import 'package:flutter_deck/src/widgets/widgets.dart';
 ///   }
 /// }
 /// ```
-class FlutterDeckBulletList extends StatelessWidget {
+class FlutterDeckBulletList extends StatefulWidget {
   /// Creates a widget that renders a list of bullet points.
   ///
   /// Bullet point [items] are rendered as a row with a bullet point and the
@@ -60,11 +60,7 @@ class FlutterDeckBulletList extends StatelessWidget {
     this.useSteps = false,
     this.bulletPointWidget,
     super.key,
-  })  : _autoSizeGroup = AutoSizeGroup(),
-        assert(
-          items.isNotEmpty,
-          'You must provide at least one bullet point.',
-        );
+  }) : assert(items.isNotEmpty, 'You must provide at least one bullet point.');
 
   /// A list of bullet points.
   final List<String> items;
@@ -76,24 +72,28 @@ class FlutterDeckBulletList extends StatelessWidget {
   /// A widget to use as the bullet point. If not provided, a dot will be used.
   final Widget? bulletPointWidget;
 
-  /// Used to synchronize the font size of the bullet points.
-  final AutoSizeGroup _autoSizeGroup;
+  @override
+  State<FlutterDeckBulletList> createState() => _FlutterDeckBulletListState();
+}
+
+class _FlutterDeckBulletListState extends State<FlutterDeckBulletList> {
+  final _autoSizeGroup = AutoSizeGroup();
 
   @override
   Widget build(BuildContext context) {
-    if (!useSteps) {
+    if (!widget.useSteps) {
       return _BulletList(
-        items: items,
+        items: widget.items,
         autoSizeGroup: _autoSizeGroup,
-        bulletPointWidget: bulletPointWidget,
+        bulletPointWidget: widget.bulletPointWidget,
       );
     }
 
     return FlutterDeckSlideStepsBuilder(
       builder: (context, stepNumber) => _BulletList(
-        items: items,
+        items: widget.items,
         autoSizeGroup: _autoSizeGroup,
-        bulletPointWidget: bulletPointWidget,
+        bulletPointWidget: widget.bulletPointWidget,
         stepNumber: stepNumber,
       ),
     );
@@ -119,17 +119,18 @@ class _BulletList extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         for (var i = 0; i < items.length; i++)
-          if (stepNumber == null || stepNumber != null && i + 1 <= stepNumber!)
-            Flexible(
-              child: Padding(
-                padding: const EdgeInsets.only(bottom: 16),
-                child: _BulletListItem(
-                  group: autoSizeGroup,
-                  text: items[i],
-                  bulletPointWidget: bulletPointWidget,
-                ),
+          Flexible(
+            child: Padding(
+              padding: const EdgeInsets.only(bottom: 16),
+              child: _BulletListItem(
+                group: autoSizeGroup,
+                text: items[i],
+                visible: stepNumber == null ||
+                    stepNumber != null && i + 1 <= stepNumber!,
+                bulletPointWidget: bulletPointWidget,
               ),
             ),
+          ),
       ],
     );
   }
@@ -139,24 +140,29 @@ class _BulletListItem extends StatelessWidget {
   const _BulletListItem({
     required this.group,
     required this.text,
+    required this.visible,
     this.bulletPointWidget,
   });
 
   final AutoSizeGroup group;
   final String text;
+  final bool visible;
   final Widget? bulletPointWidget;
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        bulletPointWidget ?? _AutoSizeText('\u2022', group: group),
-        const SizedBox(width: 8),
-        Expanded(
-          child: _AutoSizeText(text, group: group),
-        ),
-      ],
+    return Visibility.maintain(
+      visible: visible,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          bulletPointWidget ?? _AutoSizeText('\u2022', group: group),
+          const SizedBox(width: 8),
+          Expanded(
+            child: _AutoSizeText(text, group: group),
+          ),
+        ],
+      ),
     );
   }
 }

lib/src/widgets/internal/drawer/flutter_deck_drawer.dart

@@ -4,7 +4,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_deck/src/flutter_deck.dart';
 import 'package:flutter_deck/src/flutter_deck_router.dart';
 
-const _slideCardHeight = 48.0;
+const _navigationDrawerWidth = 400.0;
+const _navigationItemHeight = 48.0;
 
 /// A widget that is used as a navigation drawer for the [FlutterDeck].
 ///
@@ -40,20 +41,20 @@ class _FlutterDeckDrawerState extends State<FlutterDeckDrawer> {
     final itemsCount = router.slides.length;
     final viewHeight = MediaQuery.sizeOf(context).height;
 
-    if (viewHeight >= itemsCount * _slideCardHeight) return 0;
+    if (viewHeight >= itemsCount * _navigationItemHeight) return 0;
 
     final index = router.getCurrentSlideIndex();
-    final itemsInView = (viewHeight / _slideCardHeight).floor();
+    final itemsInView = (viewHeight / _navigationItemHeight).floor();
 
     if (index < itemsInView / 2) return 0;
 
-    final remainingOffset = viewHeight - itemsInView * _slideCardHeight;
+    final remainingOffset = viewHeight - itemsInView * _navigationItemHeight;
     final scrollToIndex = math.min(
       index - itemsInView ~/ 3,
       itemsCount - itemsInView,
     );
 
-    return scrollToIndex * _slideCardHeight - remainingOffset;
+    return scrollToIndex * _navigationItemHeight - remainingOffset;
   }
 
   @override
@@ -62,6 +63,7 @@ class _FlutterDeckDrawerState extends State<FlutterDeckDrawer> {
     final slides = flutterDeck.router.slides;
 
     return Drawer(
+      width: _navigationDrawerWidth,
       child: ListView.builder(
         controller: _controller,
         itemBuilder: (context, index) => _SlideCard(
@@ -105,7 +107,11 @@ class _SlideCard extends StatelessWidget {
     return ListTile(
       selected: isActive,
       leading: Text('$slideNumber.'),
-      title: Text(_getSlideTitle()),
+      title: Text(
+        _getSlideTitle(),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
       onTap: () {
         if (!isActive) context.flutterDeck.goToSlide(slideNumber);
 

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.10.1
+version: 0.11.0
 homepage: https://github.com/mkobuolys/flutter_deck
 repository: https://github.com/mkobuolys/flutter_deck
 issue_tracker: https://github.com/mkobuolys/flutter_deck/issues