feat: Making decorations not overlap. #4

dwyl · May 11, 2023 · 6cdd78b · 6cdd78b
1 parent 0e4fa29
commit 6cdd78b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/lib/dynamic_menu.dart b/lib/dynamic_menu.dart
@@ -1,5 +1,6 @@
 import 'dart:ui';
 
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 
 import 'settings.dart';
@@ -91,8 +92,11 @@ class MenuItem extends StatefulWidget {
   final Key key;
   final MenuItemInfo info;
   final double leftPadding;
+  final bool isLastInArray;
+  final bool isFirstInArray;
 
-  const MenuItem({required this.key, required this.info, this.leftPadding = 16}) : super(key: key);
+  const MenuItem({required this.key, required this.info, this.leftPadding = 16, this.isLastInArray = false, this.isFirstInArray = false})
+      : super(key: key);
 
   @override
   State<MenuItem> createState() => _MenuItemState();
@@ -136,13 +140,26 @@ class _MenuItemState extends State<MenuItem> {
     updateDeeplyNestedObjectInPreferences(menuItemInfo, menuItemInfoList);
   }
 
+  /// Function that renders the border decoration according to if the menu item is last on the array
+  BoxDecoration _renderBorderDecoration() {
+    if (widget.isLastInArray) {
+      return const BoxDecoration();
+    }
+
+    if (widget.isFirstInArray) {
+      return const BoxDecoration(border: Border(top: BorderSide(color: Colors.white), bottom: BorderSide(color: Colors.white)));
+    }
+
+    return const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.white)));
+  }
+
   @override
   Widget build(BuildContext context) {
     // If the tile's children is empty, we render the leaf tile
     if (childrenMenuItemInfoList.isEmpty) {
       return Container(
         key: widget.key,
-        decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.white))),
+        decoration: _renderBorderDecoration(),
         child: ListTile(
             contentPadding: EdgeInsets.only(left: widget.leftPadding),
             leading: widget.info.getIcon(),
@@ -157,13 +174,13 @@ class _MenuItemState extends State<MenuItem> {
     // If the tile has children, we render this as an expandable tile.
     else {
       return Container(
-        decoration: const BoxDecoration(border: Border(bottom: BorderSide(color: Colors.white))),
+        decoration: _renderBorderDecoration(),
 
         // Rendering `ExpansionTile` which expands to render the children.
         // The children are rendered in a `ReorderableListView`
         // so they can be reordered on the same level.
         child: ExpansionTile(
-          tilePadding: EdgeInsets.only(left: widget.leftPadding),
+          tilePadding: EdgeInsets.only(left: widget.leftPadding, top: 6, bottom: 6),
           title: Text(widget.info.title,
               style: TextStyle(
                 fontSize: 25,
@@ -181,7 +198,20 @@ class _MenuItemState extends State<MenuItem> {
               physics: const NeverScrollableScrollPhysics(),
               proxyDecorator: _proxyDecorator,
               onReorder: (oldIndex, newIndex) => _reorderTiles(oldIndex, newIndex, widget.info),
-              children: childrenMenuItemInfoList.map((tile) => MenuItem(key: ValueKey(tile.id), info: tile, leftPadding: widget.leftPadding + 16)).toList()
+              children: childrenMenuItemInfoList.mapIndexed((index, tile) {
+                // Check if item is first or last in array
+                final isLastInArray = index == childrenMenuItemInfoList.length - 1;
+                final isFirstInArray = index == 0;
+
+                // Render menu item
+                return MenuItem(
+                  key: ValueKey(tile.id),
+                  info: tile,
+                  leftPadding: widget.leftPadding + 16,
+                  isLastInArray: isLastInArray,
+                  isFirstInArray: isFirstInArray,
+                );
+              }).toList()
                 ..sort((a, b) => a.info.indexInLevel.compareTo(b.info.indexInLevel)),
             )
           ],

diff --git a/lib/settings.dart b/lib/settings.dart
@@ -82,6 +82,7 @@ class MenuItemInfo {
       if (iconCode != null) {
         return Icon(
           IconData(iconCode, fontFamily: 'MaterialIcons'),
+          size: 40,
           color: colour,
         );
       }

diff --git a/pubspec.lock b/pubspec.lock
@@ -90,7 +90,7 @@ packages:
     source: hosted
     version: "4.4.0"
   collection:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: collection
       sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -40,6 +40,7 @@ dependencies:
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
   shared_preferences: ^2.1.0
+  collection: ^1.17.0
 
 dev_dependencies:
   flutter_test: