[Widget Preview] implemented gridview and listview layouts (#166150)

Implemented gridview and listview layouts and toggle buttons to switch
between layout

Fixes [#166153](https://github.com/flutter/flutter/issues/166153)
Fixes [#166154](https://github.com/flutter/flutter/issues/166154)

** Gridview Layout **
![Screenshot 2025-03-28 at 3 13
32 PM](https://github.com/user-attachments/assets/cbea7a93-d03e-4be4-8ecb-84b70458685e)

** Listview Layout **
![Screenshot 2025-03-28 at 3 13
44 PM](https://github.com/user-attachments/assets/e286d6b8-62ac-4a7c-b848-e01cf5fd033e)


** Layout Toggle Buttons ** 
![Screenshot 2025-03-28 at 3 16
06 PM](https://github.com/user-attachments/assets/0260d3ca-f470-4ae4-8799-76933357d1c3)

packages/flutter_tools/templates/widget_preview_scaffold/lib/src/widget_preview_rendering.dart.tmpl

@@ -413,8 +413,106 @@ Future<void> mainImpl() async {
   runApp(_WidgetPreviewScaffold());
 }
 
+/// Define the Enum for Layout Types
+enum LayoutType { gridView, listView }
+
 class _WidgetPreviewScaffold extends StatelessWidget {
-  const _WidgetPreviewScaffold();
+  // Positioning values for positioning the previewer
+  final double _previewLeftPadding = 60.0;
+  final double _previewRightPadding = 20.0;
+
+  // Positioning values for the toggle layout buttons
+  final double _toggleButtonsTopPadding = 20.0;
+  final double _toggleButtonsLeftPadding = 20.0;
+
+  // Spacing values for the grid layout
+  final double _gridSpacing = 8.0;
+  final double _gridRunSpacing = 8.0;
+
+  // Notifier to manage layout state, default to GridView
+  final ValueNotifier<LayoutType> _selectedLayout = ValueNotifier<LayoutType>(
+    LayoutType.gridView,
+  );
+
+  // Function to toggle layouts based on enum value
+  void _toggleLayout(LayoutType layout) {
+    _selectedLayout.value = layout;
+  }
+
+  Widget _buildGridViewFlex(List<WidgetPreview> previewList) {
+    return SingleChildScrollView(
+      child: Wrap(
+        spacing: _gridSpacing,
+        runSpacing: _gridRunSpacing,
+        alignment: WrapAlignment.start,
+        children: <Widget>[
+          for (final WidgetPreview preview in previewList)
+            WidgetPreviewWidget(preview: preview),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildVerticalListView(List<WidgetPreview> previewList) {
+    return ListView.builder(
+      itemCount: previewList.length,
+      itemBuilder: (context, index) {
+        final preview = previewList[index];
+        return Center(child: WidgetPreviewWidget(preview: preview));
+      },
+    );
+  }
+
+  Widget _displayToggleLayoutButtons() {
+    return Positioned(
+      top: _toggleButtonsTopPadding,
+      left: _toggleButtonsLeftPadding,
+      child: Container(
+        padding: EdgeInsets.all(8.0),
+        decoration: BoxDecoration(
+          color: Colors.grey[300],
+          borderRadius: BorderRadius.circular(8.0),
+        ),
+        child: Column(
+          children: [
+            ValueListenableBuilder<LayoutType>(
+              valueListenable: _selectedLayout,
+              builder: (context, selectedLayout, _) {
+                return Column(
+                  children: [
+                    IconButton(
+                      onPressed: () => _toggleLayout(LayoutType.gridView),
+                      icon: Icon(Icons.grid_on),
+                      color:
+                          selectedLayout == LayoutType.gridView
+                              ? Colors.blue
+                              : Colors.black,
+                    ),
+                    IconButton(
+                      onPressed: () => _toggleLayout(LayoutType.listView),
+                      icon: Icon(Icons.view_list),
+                      color:
+                          selectedLayout == LayoutType.listView
+                              ? Colors.blue
+                              : Colors.black,
+                    ),
+                  ],
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _displayPreviewer(Widget previewView) {
+    return Positioned.fill(
+      left: _previewLeftPadding,
+      right: _previewRightPadding,
+      child: Container(padding: EdgeInsets.all(8.0), child: previewView),
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -439,26 +537,34 @@ class _WidgetPreviewScaffold extends StatelessWidget {
         builder: (BuildContext context, BoxConstraints constraints) {
           return WidgetPreviewerWindowConstraints(
             constraints: constraints,
-            child: SingleChildScrollView(
+            child: ValueListenableBuilder<LayoutType>(
-              child: Column(
+              valueListenable: _selectedLayout,
-                mainAxisAlignment: MainAxisAlignment.center,
+              builder: (context, selectedLayout, _) {
-                children: <Widget>[
+                return switch (selectedLayout) {
-                  for (final WidgetPreview preview in previewList)
+                  LayoutType.gridView => _buildGridViewFlex(previewList),
-                    WidgetPreviewWidget(preview: preview),
+                  LayoutType.listView => _buildVerticalListView(previewList),
-                ],
+                };
-              ),
+              },
             ),
           );
         },
       );
     }
+
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       home: Material(
         color: Colors.transparent,
         child: DefaultAssetBundle(
           bundle: PreviewAssetBundle(),
-          child: previewView,
+          child: Stack(
+            children: [
+              // Display the previewer
+              _displayPreviewer(previewView),
+              // Display the layout toggle buttons
+              _displayToggleLayoutButtons(),
+            ],
+          ),
         ),
       ),
     );