made component for expandable menu items

lib/ui/components/expandable_menu_item_widget.dart

@@ -0,0 +1,54 @@
+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/settings/common_settings.dart';
+
+class ExpandableMenuItemWidget extends StatefulWidget {
+  final String title;
+  final Widget selectionOptionsWidget;
+  final IconData leadingIcon;
+  const ExpandableMenuItemWidget({
+    required this.title,
+    required this.selectionOptionsWidget,
+    required this.leadingIcon,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  State<ExpandableMenuItemWidget> createState() =>
+      _ExpandableMenuItemWidgetState();
+}
+
+class _ExpandableMenuItemWidgetState extends State<ExpandableMenuItemWidget> {
+  final expandableController = ExpandableController(initialExpanded: false);
+
+  @override
+  void dispose() {
+    expandableController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ExpandablePanel(
+      header: MenuItemWidget(
+        captionedTextWidget: CaptionedTextWidget(
+          text: widget.title,
+          makeTextBold: true,
+        ),
+        isHeaderOfExpansion: true,
+        leadingIcon: widget.leadingIcon,
+        trailingIcon: Icons.expand_more,
+        menuItemColor:
+            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
+        expandableController: expandableController,
+      ),
+      collapsed: const SizedBox.shrink(),
+      expanded: widget.selectionOptionsWidget,
+      theme: getExpandableTheme(context),
+      controller: expandableController,
+    );
+  }
+}

lib/ui/settings/about_section_widget.dart

@@ -1,11 +1,10 @@
 // @dart=2.9
 
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
-import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/update_service.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/settings/app_update_dialog.dart';
 import 'package:photos/ui/settings/common_settings.dart';
@@ -21,33 +20,12 @@ class AboutSectionWidget extends StatefulWidget {
 }
 
 class _AboutSectionWidgetState extends State<AboutSectionWidget> {
-  final expandableController = ExpandableController(initialExpanded: false);
-
-  @override
-  void dispose() {
-    expandableController.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "About",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Icons.info_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "About",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Icons.info_outline,
     );
   }
 

lib/ui/settings/account_section_widget.dart

@@ -1,15 +1,14 @@
 // @dart=2.9
 
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_sodium/flutter_sodium.dart';
-import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/local_authentication_service.dart';
 import 'package:photos/services/user_service.dart';
 import 'package:photos/ui/account/change_email_dialog.dart';
 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/settings/common_settings.dart';
 import 'package:photos/utils/dialog_util.dart';
@@ -23,33 +22,12 @@ class AccountSectionWidget extends StatefulWidget {
 }
 
 class AccountSectionWidgetState extends State<AccountSectionWidget> {
-  final expandableController = ExpandableController(initialExpanded: false);
-
-  @override
-  void dispose() {
-    expandableController.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "Account",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Icons.account_circle_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "Account",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Icons.account_circle_outlined,
     );
   }
 

lib/ui/settings/backup_section_widget.dart

@@ -2,7 +2,6 @@
 
 import 'dart:io';
 
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:photos/core/configuration.dart';
 import 'package:photos/ente_theme_data.dart';
@@ -13,6 +12,7 @@ import 'package:photos/services/sync_service.dart';
 import 'package:photos/ui/backup_folder_selection_page.dart';
 import 'package:photos/ui/common/dialogs.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/settings/common_settings.dart';
 import 'package:photos/ui/tools/deduplicate_page.dart';
@@ -31,33 +31,12 @@ class BackupSectionWidget extends StatefulWidget {
 }
 
 class BackupSectionWidgetState extends State<BackupSectionWidget> {
-  final expandableController = ExpandableController(initialExpanded: false);
-
-  @override
-  void dispose() {
-    expandableController.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "Backup",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Icons.backup_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "Backup",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Icons.backup_outlined,
     );
   }
 

lib/ui/settings/danger_section_widget.dart

@@ -1,11 +1,11 @@
 // @dart=2.9
 
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/user_service.dart';
 import 'package:photos/ui/account/delete_account_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/settings/common_settings.dart';
 import 'package:photos/utils/navigation_util.dart';
@@ -18,33 +18,12 @@ class DangerSectionWidget extends StatefulWidget {
 }
 
 class _DangerSectionWidgetState extends State<DangerSectionWidget> {
-  final expandableController = ExpandableController(initialExpanded: false);
-
-  @override
-  void dispose() {
-    expandableController.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "Exit",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Icons.logout_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "Exit",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Icons.logout_outlined,
     );
   }
 

lib/ui/settings/debug_section_widget.dart

@@ -1,14 +1,13 @@
 // @dart=2.9
 
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_sodium/flutter_sodium.dart';
 import 'package:photos/core/configuration.dart';
-import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/ignored_files_service.dart';
 import 'package:photos/services/local_sync_service.dart';
 import 'package:photos/services/sync_service.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/settings/common_settings.dart';
 import 'package:photos/utils/toast_util.dart';
@@ -21,33 +20,12 @@ class DebugSectionWidget extends StatefulWidget {
 }
 
 class _DebugSectionWidgetState extends State<DebugSectionWidget> {
-  final expandableController = ExpandableController(initialExpanded: false);
-
-  @override
-  void dispose() {
-    expandableController.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "Debug",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Icons.bug_report_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "Debug",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Icons.bug_report_outlined,
     );
   }
 

lib/ui/settings/security_section_widget.dart

@@ -3,7 +3,6 @@
 import 'dart:async';
 import 'dart:io';
 
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_windowmanager/flutter_windowmanager.dart';
 import 'package:photos/core/configuration.dart';
@@ -15,6 +14,7 @@ import 'package:photos/services/user_service.dart';
 import 'package:photos/ui/account/sessions_page.dart';
 import 'package:photos/ui/common/loading_widget.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/settings/common_settings.dart';
 
@@ -29,7 +29,6 @@ class _SecuritySectionWidgetState extends State<SecuritySectionWidget> {
   final _config = Configuration.instance;
 
   StreamSubscription<TwoFactorStatusChangeEvent> _twoFactorStatusChangeEvent;
-  final expandableController = ExpandableController(initialExpanded: false);
 
   @override
   void initState() {
@@ -45,29 +44,15 @@ class _SecuritySectionWidgetState extends State<SecuritySectionWidget> {
   @override
   void dispose() {
     _twoFactorStatusChangeEvent.cancel();
-    expandableController.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "Security",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Icons.local_police_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "Security",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Icons.local_police_outlined,
     );
   }
 

lib/ui/settings/social_section_widget.dart

@@ -2,11 +2,10 @@
 
 import 'dart:io';
 
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
-import 'package:photos/ente_theme_data.dart';
 import 'package:photos/services/update_service.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/settings/common_settings.dart';
 import 'package:url_launcher/url_launcher_string.dart';
@@ -19,33 +18,12 @@ class SocialSectionWidget extends StatefulWidget {
 }
 
 class _SocialSectionWidgetState extends State<SocialSectionWidget> {
-  final expandableController = ExpandableController(initialExpanded: false);
-
-  @override
-  void dispose() {
-    expandableController.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "Social",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Icons.interests_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "Social",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Icons.interests_outlined,
     );
   }
 

lib/ui/settings/support_section_widget.dart

@@ -2,13 +2,12 @@
 
 import 'dart:io';
 
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:photos/core/configuration.dart';
 import 'package:photos/core/constants.dart';
-import 'package:photos/ente_theme_data.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/settings/common_settings.dart';
 import 'package:photos/utils/email_util.dart';
@@ -21,33 +20,12 @@ class SupportSectionWidget extends StatefulWidget {
 }
 
 class _SupportSectionWidgetState extends State<SupportSectionWidget> {
-  final expandableController = ExpandableController(initialExpanded: false);
-
-  @override
-  void dispose() {
-    expandableController.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "Support",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Icons.help_outline_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "Support",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Icons.help_outline_outlined,
     );
   }
 

lib/ui/settings/theme_switch_widget.dart

@@ -1,11 +1,11 @@
 // @dart=2.9
 
 import 'package:adaptive_theme/adaptive_theme.dart';
-import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:photos/ente_theme_data.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/settings/common_settings.dart';
 
@@ -18,7 +18,6 @@ class ThemeSwitchWidget extends StatefulWidget {
 
 class _ThemeSwitchWidgetState extends State<ThemeSwitchWidget> {
   AdaptiveThemeMode currentThemeMode;
-  final expandableController = ExpandableController(initialExpanded: false);
 
   @override
   void initState() {
@@ -36,31 +35,17 @@ class _ThemeSwitchWidgetState extends State<ThemeSwitchWidget> {
 
   @override
   void dispose() {
-    expandableController.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    return ExpandablePanel(
-      header: MenuItemWidget(
-        captionedTextWidget: const CaptionedTextWidget(
-          text: "Theme",
-          makeTextBold: true,
-        ),
-        isHeaderOfExpansion: true,
-        leadingIcon: Theme.of(context).brightness == Brightness.light
-            ? Icons.light_mode_outlined
-            : Icons.dark_mode_outlined,
-        trailingIcon: Icons.expand_more,
-        menuItemColor:
-            Theme.of(context).colorScheme.enteTheme.colorScheme.fillFaint,
-        expandableController: expandableController,
-      ),
-      collapsed: const SizedBox.shrink(),
-      expanded: _getSectionOptions(context),
-      theme: getExpandableTheme(context),
-      controller: expandableController,
+    return ExpandableMenuItemWidget(
+      title: "Theme",
+      selectionOptionsWidget: _getSectionOptions(context),
+      leadingIcon: Theme.of(context).brightness == Brightness.light
+          ? Icons.light_mode_outlined
+          : Icons.dark_mode_outlined,
     );
   }