Merge pull request #836 from ente-io/fix_radius

Fix radius for menuItem border

lib/ui/advanced_settings_screen.dart

@@ -78,7 +78,7 @@ class _AdvancedSettingsScreenState extends State<AdvancedSettingsScreen> {
                                   Icons.chevron_right_outlined,
                                   color: colorScheme.strokeBase,
                                 ),
-                                borderRadius: 8,
+                                singleBorderRadius: 8,
                                 alignCaptionedTextToLeft: true,
                                 // isBottomBorderRadiusRemoved: true,
                                 isGestureDetectorDisabled: true,
@@ -96,7 +96,7 @@ class _AdvancedSettingsScreenState extends State<AdvancedSettingsScreen> {
                                 Icons.chevron_right_outlined,
                                 color: colorScheme.strokeBase,
                               ),
-                              borderRadius: 8,
+                              singleBorderRadius: 8,
                               alignCaptionedTextToLeft: true,
                               onTap: () async {
                                 routeToPage(context, const AppStorageViewer());

lib/ui/backup_settings_screen.dart

@@ -65,7 +65,7 @@ class BackupSettingsScreen extends StatelessWidget {
                                   );
                                 },
                               ),
-                              borderRadius: 8,
+                              singleBorderRadius: 8,
                               alignCaptionedTextToLeft: true,
                               isBottomBorderRadiusRemoved: true,
                               isGestureDetectorDisabled: true,
@@ -87,7 +87,7 @@ class BackupSettingsScreen extends StatelessWidget {
                                   !Configuration.instance.shouldBackupVideos(),
                                 ),
                               ),
-                              borderRadius: 8,
+                              singleBorderRadius: 8,
                               alignCaptionedTextToLeft: true,
                               isTopBorderRadiusRemoved: true,
                               isGestureDetectorDisabled: true,
@@ -115,7 +115,7 @@ class BackupSettingsScreen extends StatelessWidget {
                                         );
                                       },
                                     ),
-                                    borderRadius: 8,
+                                    singleBorderRadius: 8,
                                     alignCaptionedTextToLeft: true,
                                     isGestureDetectorDisabled: true,
                                   ),

lib/ui/components/menu_item_widget/menu_item_widget.dart

@@ -23,6 +23,7 @@ class MenuItemWidget extends StatefulWidget {
   final Color? leadingIconColor;
 
   final Widget? leadingIconWidget;
+
   // leadIconSize deafult value is 20.
   final double leadingIconSize;
 
@@ -39,7 +40,13 @@ class MenuItemWidget extends StatefulWidget {
   final VoidCallback? onDoubleTap;
   final Color? menuItemColor;
   final bool alignCaptionedTextToLeft;
-  final double borderRadius;
+
+  // singleBorderRadius is applied to the border when it's a standalone menu item.
+  // Widget will apply singleBorderRadius if value of both isTopBorderRadiusRemoved
+  // and isBottomBorderRadiusRemoved is false. Otherwise, multipleBorderRadius will
+  // be applied
+  final double singleBorderRadius;
+  final double multipleBorderRadius;
   final Color? pressedColor;
   final ExpandableController? expandableController;
   final bool isBottomBorderRadiusRemoved;
@@ -76,7 +83,8 @@ class MenuItemWidget extends StatefulWidget {
     this.onDoubleTap,
     this.menuItemColor,
     this.alignCaptionedTextToLeft = false,
-    this.borderRadius = 4.0,
+    this.singleBorderRadius = 4.0,
+    this.multipleBorderRadius = 8.0,
     this.pressedColor,
     this.expandableController,
     this.isBottomBorderRadiusRemoved = false,
@@ -98,10 +106,15 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
       ValueNotifier(ExecutionState.idle);
 
   Color? menuItemColor;
+  late double borderRadius;
 
   @override
   void initState() {
     menuItemColor = widget.menuItemColor;
+    borderRadius =
+        (widget.isBottomBorderRadiusRemoved || widget.isTopBorderRadiusRemoved)
+            ? widget.multipleBorderRadius
+            : widget.singleBorderRadius;
     if (widget.expandableController != null) {
       widget.expandableController!.addListener(() {
         setState(() {});
@@ -140,15 +153,15 @@ class _MenuItemWidgetState extends State<MenuItemWidget> {
   }
 
   Widget menuItemWidget(BuildContext context) {
-    final borderRadius = Radius.circular(widget.borderRadius);
+    final circularRadius = Radius.circular(borderRadius);
     final isExpanded = widget.expandableController?.value;
     final bottomBorderRadius =
         (isExpanded != null && isExpanded) || widget.isBottomBorderRadiusRemoved
             ? const Radius.circular(0)
-            : borderRadius;
+            : circularRadius;
     final topBorderRadius = widget.isTopBorderRadiusRemoved
         ? const Radius.circular(0)
-        : borderRadius;
+        : circularRadius;
     return AnimatedContainer(
       duration: const Duration(milliseconds: 20),
       width: double.infinity,

lib/ui/sharing/album_participants_page.dart

@@ -112,7 +112,7 @@ class _AlbumParticipantsPageState extends State<AlbumParticipantsPage> {
                             ),
                             leadingIconSize: 24,
                             menuItemColor: colorScheme.fillFaint,
-                            borderRadius: 8,
+                            singleBorderRadius: 8,
                             isGestureDetectorDisabled: true,
                           ),
                         ],
@@ -166,7 +166,7 @@ class _AlbumParticipantsPageState extends State<AlbumParticipantsPage> {
                               : null,
                           isTopBorderRadiusRemoved: listIndex > 0,
                           isBottomBorderRadiusRemoved: true,
-                          borderRadius: 8,
+                          singleBorderRadius: 8,
                         ),
                         DividerWidget(
                           dividerType: DividerType.menu,
@@ -188,7 +188,7 @@ class _AlbumParticipantsPageState extends State<AlbumParticipantsPage> {
                         _navigateToAddUser(false);
                       },
                       isTopBorderRadiusRemoved: collaborators.isNotEmpty,
-                      borderRadius: 8,
+                      singleBorderRadius: 8,
                     );
                   }
                   return const SizedBox.shrink();
@@ -240,7 +240,7 @@ class _AlbumParticipantsPageState extends State<AlbumParticipantsPage> {
                               : null,
                           isTopBorderRadiusRemoved: listIndex > 0,
                           isBottomBorderRadiusRemoved: !isLastItem,
-                          borderRadius: 8,
+                          singleBorderRadius: 8,
                         ),
                         isLastItem
                             ? const SizedBox.shrink()
@@ -262,7 +262,7 @@ class _AlbumParticipantsPageState extends State<AlbumParticipantsPage> {
                         _navigateToAddUser(true);
                       },
                       isTopBorderRadiusRemoved: viewers.isNotEmpty,
-                      borderRadius: 8,
+                      singleBorderRadius: 8,
                     );
                   }
                   return const SizedBox.shrink();

lib/ui/sharing/share_collection_page.dart

@@ -72,7 +72,6 @@ class _ShareCollectionPageState extends State<ShareCollectionPage> {
         ),
         leadingIcon: Icons.add,
         menuItemColor: getEnteColorScheme(context).fillFaint,
-        borderRadius: 4.0,
         isTopBorderRadiusRemoved: _sharees.isNotEmpty,
         isBottomBorderRadiusRemoved: true,
         onTap: () async {
@@ -101,8 +100,7 @@ class _ShareCollectionPageState extends State<ShareCollectionPage> {
         ),
         leadingIcon: Icons.add,
         menuItemColor: getEnteColorScheme(context).fillFaint,
-        borderRadius: 4.0,
-        isTopBorderRadiusRemoved: _sharees.isNotEmpty,
+        isTopBorderRadiusRemoved: true,
         onTap: () async {
           routeToPage(context, AddParticipantPage(widget.collection, false))
               .then(

lib/ui/tools/debug/app_storage_viewer.dart

@@ -161,7 +161,7 @@ class _AppStorageViewerState extends State<AppStorageViewer> {
                             ),
                             menuItemColor:
                                 getEnteColorScheme(context).fillFaint,
-                            borderRadius: 8,
+                            singleBorderRadius: 8,
                             alwaysShowSuccessState: true,
                             onTap: () async {
                               for (var pathItem in paths) {

lib/ui/tools/debug/path_storage_viewer.dart

@@ -99,7 +99,7 @@ class _PathStorageViewerState extends State<PathStorageViewer> {
             ),
       trailingIcon: err != null ? Icons.error_outline_outlined : null,
       trailingIconIsMuted: err != null,
-      borderRadius: 8,
+      singleBorderRadius: 8,
       menuItemColor: getEnteColorScheme(context).fillFaint,
       isBottomBorderRadiusRemoved: widget.removeBottomRadius,
       isTopBorderRadiusRemoved: widget.removeTopRadius,

lib/ui/viewer/gallery/device_folder_page.dart

@@ -113,7 +113,7 @@ class _BackupHeaderWidgetState extends State<BackupHeaderWidget> {
             children: [
               MenuItemWidget(
                 captionedTextWidget: const CaptionedTextWidget(title: "Backup"),
-                borderRadius: 8.0,
+                singleBorderRadius: 8.0,
                 menuItemColor: colorScheme.fillFaint,
                 alignCaptionedTextToLeft: true,
                 trailingWidget: ToggleSwitchWidget(
@@ -235,7 +235,7 @@ class _ResetIgnoredFilesWidgetState extends State<ResetIgnoredFilesWidget> {
           captionedTextWidget: const CaptionedTextWidget(
             title: "Reset ignored files",
           ),
-          borderRadius: 8.0,
+          singleBorderRadius: 8.0,
           menuItemColor: getEnteColorScheme(context).fillFaint,
           leadingIcon: Icons.cloud_off_outlined,
           alwaysShowSuccessState: true,