Refactored MenuItemWidget

lib/ui/advanced_settings_screen.dart

@@ -6,7 +6,7 @@ import 'package:photos/events/force_reload_home_gallery_event.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/icon_button_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/title_bar_title_widget.dart';
 import 'package:photos/ui/components/title_bar_widget.dart';
 import 'package:photos/ui/tools/debug/app_storage_viewer.dart';

lib/ui/backup_settings_screen.dart

@@ -6,7 +6,7 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/divider_widget.dart';
 import 'package:photos/ui/components/icon_button_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/menu_section_description_widget.dart';
 import 'package:photos/ui/components/title_bar_title_widget.dart';
 import 'package:photos/ui/components/title_bar_widget.dart';

lib/ui/components/expandable_menu_item_widget.dart

@@ -2,7 +2,7 @@ import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:photos/ente_theme_data.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 import 'package:photos/ui/settings/inherited_settings_state.dart';
 

lib/ui/components/menu_item_widget/menu_item_child_widgets.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:photos/theme/ente_theme.dart';
+
+class TrailingWidget extends StatefulWidget {
+  final IconData? trailingIcon;
+  final Color? trailingIconColor;
+  final Widget? trailingWidget;
+  final bool trailingIconIsMuted;
+  final double trailingExtraMargin;
+  const TrailingWidget({
+    this.trailingIcon,
+    this.trailingIconColor,
+    this.trailingWidget,
+    required this.trailingIconIsMuted,
+    required this.trailingExtraMargin,
+    super.key,
+  });
+  @override
+  State<TrailingWidget> createState() => _TrailingWidgetState();
+}
+
+class _TrailingWidgetState extends State<TrailingWidget> {
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = getEnteColorScheme(context);
+    if (widget.trailingIcon != null) {
+      return Padding(
+        padding: EdgeInsets.only(
+          right: widget.trailingExtraMargin,
+        ),
+        child: Icon(
+          widget.trailingIcon,
+          color: widget.trailingIconIsMuted
+              ? colorScheme.strokeMuted
+              : widget.trailingIconColor,
+        ),
+      );
+    } else {
+      return widget.trailingWidget ?? const SizedBox.shrink();
+    }
+  }
+}
+
+class ExpansionTrailingIcon extends StatelessWidget {
+  final bool isExpanded;
+  final IconData? trailingIcon;
+  final Color? trailingIconColor;
+  const ExpansionTrailingIcon({
+    required this.isExpanded,
+    this.trailingIcon,
+    this.trailingIconColor,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedOpacity(
+      duration: const Duration(milliseconds: 100),
+      curve: Curves.easeInOut,
+      opacity: isExpanded ? 0 : 1,
+      child: AnimatedSwitcher(
+        transitionBuilder: (child, animation) {
+          return ScaleTransition(scale: animation, child: child);
+        },
+        duration: const Duration(milliseconds: 200),
+        switchInCurve: Curves.easeOut,
+        child: isExpanded
+            ? const SizedBox.shrink()
+            : Icon(
+                trailingIcon,
+                color: trailingIconColor,
+              ),
+      ),
+    );
+  }
+}
+
+class LeadingWidget extends StatelessWidget {
+  final IconData? leadingIcon;
+  final Color? leadingIconColor;
+
+  final Widget? leadingIconWidget;
+  // leadIconSize deafult value is 20.
+  final double leadingIconSize;
+  const LeadingWidget({
+    required this.leadingIconSize,
+    this.leadingIcon,
+    this.leadingIconColor,
+    this.leadingIconWidget,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(right: 10),
+      child: SizedBox(
+        height: leadingIconSize,
+        width: leadingIconSize,
+        child: leadingIcon == null
+            ? (leadingIconWidget != null
+                ? FittedBox(
+                    fit: BoxFit.contain,
+                    child: leadingIconWidget,
+                  )
+                : const SizedBox.shrink())
+            : FittedBox(
+                fit: BoxFit.contain,
+                child: Icon(
+                  leadingIcon,
+                  color: leadingIconColor ??
+                      getEnteColorScheme(context).strokeBase,
+                ),
+              ),
+      ),
+    );
+  }
+}

lib/ui/components/menu_item_widget.dart → lib/ui/components/menu_item_widget/menu_item_widget.dart

@@ -1,7 +1,7 @@
 import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
-import 'package:photos/ente_theme_data.dart';
 import 'package:photos/theme/ente_theme.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_child_widgets.dart';
 
 class MenuItemWidget extends StatefulWidget {
   final Widget captionedTextWidget;
@@ -110,7 +110,6 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
   }
 
   Widget menuItemWidget(BuildContext context) {
-    final enteColorScheme = Theme.of(context).colorScheme.enteTheme.colorScheme;
     final borderRadius = Radius.circular(widget.borderRadius);
     final isExpanded = widget.expandableController?.value;
     final bottomBorderRadius =
@@ -138,61 +137,27 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
         children: [
           widget.alignCaptionedTextToLeft && widget.leadingIcon == null
               ? const SizedBox.shrink()
-              : Padding(
-                  padding: const EdgeInsets.only(right: 10),
-                  child: SizedBox(
-                    height: widget.leadingIconSize,
-                    width: widget.leadingIconSize,
-                    child: widget.leadingIcon == null
-                        ? (widget.leadingIconWidget != null
-                            ? FittedBox(
-                                fit: BoxFit.contain,
-                                child: widget.leadingIconWidget,
-                              )
-                            : const SizedBox.shrink())
-                        : FittedBox(
-                            fit: BoxFit.contain,
-                            child: Icon(
-                              widget.leadingIcon,
-                              color: widget.leadingIconColor ??
-                                  enteColorScheme.strokeBase,
-                            ),
-                          ),
-                  ),
+              : LeadingWidget(
+                  leadingIconSize: widget.leadingIconSize,
+                  leadingIcon: widget.leadingIcon,
+                  leadingIconColor: widget.leadingIconColor,
+                  leadingIconWidget: widget.leadingIconWidget,
                 ),
           widget.captionedTextWidget,
-          widget.expandableController != null
-              ? AnimatedOpacity(
-                  duration: const Duration(milliseconds: 100),
-                  curve: Curves.easeInOut,
-                  opacity: isExpanded! ? 0 : 1,
-                  child: AnimatedSwitcher(
-                    transitionBuilder: (child, animation) {
-                      return ScaleTransition(scale: animation, child: child);
-                    },
-                    duration: const Duration(milliseconds: 200),
-                    switchInCurve: Curves.easeOut,
-                    child: isExpanded
-                        ? const SizedBox.shrink()
-                        : Icon(
-                            widget.trailingIcon,
-                            color: widget.trailingIconColor,
-                          ),
-                  ),
-                )
-              : widget.trailingIcon != null
-                  ? Padding(
-                      padding: EdgeInsets.only(
-                        right: widget.trailingExtraMargin,
-                      ),
-                      child: Icon(
-                        widget.trailingIcon,
-                        color: widget.trailingIconIsMuted
-                            ? enteColorScheme.strokeMuted
-                            : widget.trailingIconColor,
-                      ),
-                    )
-                  : widget.trailingWidget ?? const SizedBox.shrink(),
+          if (widget.expandableController != null)
+            ExpansionTrailingIcon(
+              isExpanded: isExpanded!,
+              trailingIcon: widget.trailingIcon,
+              trailingIconColor: widget.trailingIconColor,
+            )
+          else
+            TrailingWidget(
+              trailingIcon: widget.trailingIcon,
+              trailingIconColor: widget.trailingIconColor,
+              trailingWidget: widget.trailingWidget,
+              trailingIconIsMuted: widget.trailingIconIsMuted,
+              trailingExtraMargin: widget.trailingExtraMargin,
+            ),
         ],
       ),
     );

lib/ui/settings/about_section_widget.dart

@@ -4,7 +4,7 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/common/web_page.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/settings/app_update_dialog.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 import 'package:photos/utils/dialog_util.dart';

lib/ui/settings/account_section_widget.dart

@@ -11,7 +11,7 @@ import 'package:photos/ui/account/password_entry_page.dart';
 import 'package:photos/ui/account/recovery_key_page.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 import 'package:photos/utils/dialog_util.dart';
 import 'package:photos/utils/navigation_util.dart';

lib/ui/settings/backup_section_widget.dart

@@ -12,7 +12,7 @@ import 'package:photos/ui/backup_settings_screen.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/dialog_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/models/button_type.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 import 'package:photos/ui/tools/deduplicate_page.dart';

lib/ui/settings/debug_section_widget.dart

@@ -8,7 +8,7 @@ import 'package:photos/services/update_service.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 import 'package:photos/utils/toast_util.dart';
 

lib/ui/settings/general_section_widget.dart

@@ -5,7 +5,7 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/advanced_settings_screen.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/payment/subscription.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 import 'package:photos/utils/dialog_util.dart';

lib/ui/settings/security_section_widget.dart

@@ -11,7 +11,7 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/account/sessions_page.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/toggle_switch_widget.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 

lib/ui/settings/social_section_widget.dart

@@ -3,7 +3,7 @@ import 'package:photos/services/update_service.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 

lib/ui/settings/support_section_widget.dart

@@ -7,7 +7,7 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/common/web_page.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/settings/about_section_widget.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 import 'package:photos/utils/email_util.dart';

lib/ui/settings/theme_switch_widget.dart

@@ -5,7 +5,7 @@ import 'package:photos/ente_theme_data.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/expandable_menu_item_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/settings/common_settings.dart';
 
 class ThemeSwitchWidget extends StatefulWidget {

lib/ui/sharing/add_partipant_page.dart

@@ -8,7 +8,7 @@ import 'package:photos/ui/actions/collection/collection_sharing_actions.dart';
 import 'package:photos/ui/components/button_widget.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/divider_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/menu_section_description_widget.dart';
 import 'package:photos/ui/components/menu_section_title.dart';
 import 'package:photos/ui/components/models/button_type.dart';

lib/ui/sharing/album_participants_page.dart

@@ -5,7 +5,7 @@ import 'package:photos/models/collection.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/divider_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/menu_section_title.dart';
 import 'package:photos/ui/components/title_bar_title_widget.dart';
 import 'package:photos/ui/components/title_bar_widget.dart';

lib/ui/sharing/manage_album_participant.dart

@@ -6,7 +6,7 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/actions/collection/collection_sharing_actions.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/divider_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/menu_section_description_widget.dart';
 import 'package:photos/ui/components/menu_section_title.dart';
 import 'package:photos/ui/components/title_bar_title_widget.dart';

lib/ui/sharing/manage_links_widget.dart

@@ -14,7 +14,7 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/actions/collection/collection_sharing_actions.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/divider_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/menu_section_description_widget.dart';
 import 'package:photos/utils/crypto_util.dart';
 import 'package:photos/utils/date_time_util.dart';

lib/ui/sharing/share_collection_page.dart

@@ -8,7 +8,7 @@ import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/actions/collection/collection_sharing_actions.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/divider_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/menu_section_description_widget.dart';
 import 'package:photos/ui/components/menu_section_title.dart';
 import 'package:photos/ui/sharing/add_partipant_page.dart';

lib/ui/tools/debug/app_storage_viewer.dart

@@ -9,7 +9,7 @@ import 'package:photos/services/feature_flag_service.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
 import 'package:photos/ui/components/icon_button_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/menu_section_title.dart';
 import 'package:photos/ui/components/title_bar_title_widget.dart';
 import 'package:photos/ui/components/title_bar_widget.dart';

lib/ui/tools/debug/path_storage_viewer.dart

@@ -6,7 +6,7 @@ import 'package:flutter/services.dart';
 import 'package:logging/logging.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/utils/data_util.dart';
 import 'package:photos/utils/directory_content.dart';
 

lib/ui/viewer/gallery/device_folder_page.dart

@@ -15,7 +15,7 @@ import 'package:photos/services/ignored_files_service.dart';
 import 'package:photos/services/remote_sync_service.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/captioned_text_widget.dart';
-import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_item_widget/menu_item_widget.dart';
 import 'package:photos/ui/components/menu_section_description_widget.dart';
 import 'package:photos/ui/components/toggle_switch_widget.dart';
 import 'package:photos/ui/viewer/actions/file_selection_overlay_bar.dart';