@@ -413,8 +413,106 @@ Future<void> mainImpl() async {
413413 runApp (_WidgetPreviewScaffold ());
414414}
415415
416+ /// Define the Enum for Layout Types
417+ enum LayoutType { gridView, listView }
418+
416419class _WidgetPreviewScaffold extends StatelessWidget {
417- const _WidgetPreviewScaffold ();
420+ // Positioning values for positioning the previewer
421+ final double _previewLeftPadding = 60.0 ;
422+ final double _previewRightPadding = 20.0 ;
423+
424+ // Positioning values for the toggle layout buttons
425+ final double _toggleButtonsTopPadding = 20.0 ;
426+ final double _toggleButtonsLeftPadding = 20.0 ;
427+
428+ // Spacing values for the grid layout
429+ final double _gridSpacing = 8.0 ;
430+ final double _gridRunSpacing = 8.0 ;
431+
432+ // Notifier to manage layout state, default to GridView
433+ final ValueNotifier <LayoutType > _selectedLayout = ValueNotifier <LayoutType >(
434+ LayoutType .gridView,
435+ );
436+
437+ // Function to toggle layouts based on enum value
438+ void _toggleLayout (LayoutType layout) {
439+ _selectedLayout.value = layout;
440+ }
441+
442+ Widget _buildGridViewFlex (List <WidgetPreview > previewList) {
443+ return SingleChildScrollView (
444+ child: Wrap (
445+ spacing: _gridSpacing,
446+ runSpacing: _gridRunSpacing,
447+ alignment: WrapAlignment .start,
448+ children: < Widget > [
449+ for (final WidgetPreview preview in previewList)
450+ WidgetPreviewWidget (preview: preview),
451+ ],
452+ ),
453+ );
454+ }
455+
456+ Widget _buildVerticalListView (List <WidgetPreview > previewList) {
457+ return ListView .builder (
458+ itemCount: previewList.length,
459+ itemBuilder: (context, index) {
460+ final preview = previewList[index];
461+ return Center (child: WidgetPreviewWidget (preview: preview));
462+ },
463+ );
464+ }
465+
466+ Widget _displayToggleLayoutButtons () {
467+ return Positioned (
468+ top: _toggleButtonsTopPadding,
469+ left: _toggleButtonsLeftPadding,
470+ child: Container (
471+ padding: EdgeInsets .all (8.0 ),
472+ decoration: BoxDecoration (
473+ color: Colors .grey[300 ],
474+ borderRadius: BorderRadius .circular (8.0 ),
475+ ),
476+ child: Column (
477+ children: [
478+ ValueListenableBuilder <LayoutType >(
479+ valueListenable: _selectedLayout,
480+ builder: (context, selectedLayout, _) {
481+ return Column (
482+ children: [
483+ IconButton (
484+ onPressed: () => _toggleLayout (LayoutType .gridView),
485+ icon: Icon (Icons .grid_on),
486+ color:
487+ selectedLayout == LayoutType .gridView
488+ ? Colors .blue
489+ : Colors .black,
490+ ),
491+ IconButton (
492+ onPressed: () => _toggleLayout (LayoutType .listView),
493+ icon: Icon (Icons .view_list),
494+ color:
495+ selectedLayout == LayoutType .listView
496+ ? Colors .blue
497+ : Colors .black,
498+ ),
499+ ],
500+ );
501+ },
502+ ),
503+ ],
504+ ),
505+ ),
506+ );
507+ }
508+
509+ Widget _displayPreviewer (Widget previewView) {
510+ return Positioned .fill (
511+ left: _previewLeftPadding,
512+ right: _previewRightPadding,
513+ child: Container (padding: EdgeInsets .all (8.0 ), child: previewView),
514+ );
515+ }
418516
419517 @override
420518 Widget build (BuildContext context) {
@@ -439,26 +537,34 @@ class _WidgetPreviewScaffold extends StatelessWidget {
439537 builder: (BuildContext context, BoxConstraints constraints) {
440538 return WidgetPreviewerWindowConstraints (
441539 constraints: constraints,
442- child: SingleChildScrollView (
443- child : Column (
444- mainAxisAlignment : MainAxisAlignment .center,
445- children : < Widget > [
446- for ( final WidgetPreview preview in previewList)
447- WidgetPreviewWidget (preview : preview ),
448- ],
449- ) ,
540+ child: ValueListenableBuilder < LayoutType > (
541+ valueListenable : _selectedLayout,
542+ builder : (context, selectedLayout, _) {
543+ return switch (selectedLayout) {
544+ LayoutType .gridView => _buildGridViewFlex ( previewList),
545+ LayoutType .listView => _buildVerticalListView (previewList ),
546+ };
547+ } ,
450548 ),
451549 );
452550 },
453551 );
454552 }
553+
455554 return MaterialApp (
456555 debugShowCheckedModeBanner: false ,
457556 home: Material (
458557 color: Colors .transparent,
459558 child: DefaultAssetBundle (
460559 bundle: PreviewAssetBundle (),
461- child: previewView,
560+ child: Stack (
561+ children: [
562+ // Display the previewer
563+ _displayPreviewer (previewView),
564+ // Display the layout toggle buttons
565+ _displayToggleLayoutButtons (),
566+ ],
567+ ),
462568 ),
463569 ),
464570 );
0 commit comments