Created new picker for setting photo grid size

lib/ui/advanced_settings_screen.dart

@@ -10,6 +10,7 @@ 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';
+import 'package:photos/ui/viewer/gallery/photo_grid_size_picker_page.dart';
 import 'package:photos/utils/local_settings.dart';
 import 'package:photos/utils/navigation_util.dart';
 
@@ -66,7 +67,16 @@ class _AdvancedSettingsScreenState extends State<AdvancedSettingsScreen> {
                           children: [
                             GestureDetector(
                               onTap: () {
-                                _showPhotoGridSizePicker(delegateBuildContext);
+                                // _showPhotoGridSizePicker(delegateBuildContext);
+                                routeToPage(
+                                  context,
+                                  const PhotoGridSizePickerPage(),
+                                ).then((value) {
+                                  setState(() {
+                                    _photoGridSize = LocalSettings.instance
+                                        .getPhotoGridSize();
+                                  });
+                                });
                               },
                               child: MenuItemWidget(
                                 captionedTextWidget: CaptionedTextWidget(
@@ -80,7 +90,6 @@ class _AdvancedSettingsScreenState extends State<AdvancedSettingsScreen> {
                                 ),
                                 singleBorderRadius: 8,
                                 alignCaptionedTextToLeft: true,
-                                // isBottomBorderRadiusRemoved: true,
                                 isGestureDetectorDisabled: true,
                               ),
                             ),

lib/ui/viewer/gallery/photo_grid_size_picker_page.dart

@@ -0,0 +1,124 @@
+import 'package:flutter/material.dart';
+import 'package:photos/core/constants.dart';
+import 'package:photos/core/event_bus.dart';
+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/divider_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/utils/local_settings.dart';
+import 'package:photos/utils/separators_util.dart';
+
+class PhotoGridSizePickerPage extends StatelessWidget {
+  const PhotoGridSizePickerPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: CustomScrollView(
+        primary: false,
+        slivers: <Widget>[
+          const TitleBarWidget(
+            flexibleSpaceTitle: TitleBarTitleWidget(
+              title: "Photo grid size",
+            ),
+          ),
+          SliverList(
+            delegate: SliverChildBuilderDelegate(
+              (context, index) {
+                return Padding(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 16,
+                    vertical: 20,
+                  ),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: const [
+                      ClipRRect(
+                        borderRadius: BorderRadius.all(Radius.circular(8)),
+                        child: ItemsWidget(),
+                      ),
+                    ],
+                  ),
+                );
+              },
+              childCount: 1,
+            ),
+          ),
+          const SliverPadding(padding: EdgeInsets.symmetric(vertical: 12)),
+        ],
+      ),
+    );
+  }
+}
+
+class ItemsWidget extends StatefulWidget {
+  const ItemsWidget({super.key});
+
+  @override
+  State<ItemsWidget> createState() => _ItemsWidgetState();
+}
+
+class _ItemsWidgetState extends State<ItemsWidget> {
+  late int currentGridSize;
+  List<Widget> items = [];
+  final List<int> gridSizes = [];
+  @override
+  void initState() {
+    currentGridSize = LocalSettings.instance.getPhotoGridSize();
+    for (int gridSize = photoGridSizeMin;
+        gridSize <= photoGridSizeMax;
+        gridSize++) {
+      gridSizes.add(gridSize);
+    }
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    items.clear();
+    for (int girdSize in gridSizes) {
+      items.add(
+        _menuItemForPicker(girdSize),
+      );
+    }
+    items = addSeparators(
+      items,
+      DividerWidget(
+        dividerType: DividerType.menuNoIcon,
+        bgColor: getEnteColorScheme(context).fillFaint,
+      ),
+    );
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: items,
+    );
+  }
+
+  Widget _menuItemForPicker(int gridSize) {
+    return MenuItemWidget(
+      key: ValueKey(gridSize),
+      menuItemColor: getEnteColorScheme(context).fillFaint,
+      captionedTextWidget: CaptionedTextWidget(
+        title: "$gridSize",
+      ),
+      trailingIcon: currentGridSize == gridSize ? Icons.check : null,
+      alignCaptionedTextToLeft: true,
+      isTopBorderRadiusRemoved: true,
+      isBottomBorderRadiusRemoved: true,
+      showOnlyLoadingState: true,
+      onTap: () async {
+        await LocalSettings.instance.setPhotoGridSize(gridSize).then(
+              (value) => setState(() {
+                currentGridSize = gridSize;
+              }),
+            );
+        Bus.instance.fire(
+          ForceReloadHomeGalleryEvent("grid size changed"),
+        );
+      },
+    );
+  }
+}