@@ -413,8 +413,106 @@ Future<void> mainImpl() async {
413
413
runApp (_WidgetPreviewScaffold ());
414
414
}
415
415
416
+ /// Define the Enum for Layout Types
417
+ enum LayoutType { gridView, listView }
418
+
416
419
class _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
+ }
418
516
419
517
@override
420
518
Widget build (BuildContext context) {
@@ -439,26 +537,34 @@ class _WidgetPreviewScaffold extends StatelessWidget {
439
537
builder: (BuildContext context, BoxConstraints constraints) {
440
538
return WidgetPreviewerWindowConstraints (
441
539
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
+ } ,
450
548
),
451
549
);
452
550
},
453
551
);
454
552
}
553
+
455
554
return MaterialApp (
456
555
debugShowCheckedModeBanner: false ,
457
556
home: Material (
458
557
color: Colors .transparent,
459
558
child: DefaultAssetBundle (
460
559
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
+ ),
462
568
),
463
569
),
464
570
);
0 commit comments