feat: add fullscreen shader widget and integration tests for shader screenshots

Author: orestesgaolin

.vscode/launch.json

@@ -8,17 +8,20 @@
             "name": "shaders",
             "request": "launch",
             "type": "dart",
+            "program": "lib/main.dart",
             "preLaunchTask": "Copy Shaders to Assets"
         },
         {
             "name": "shaders (profile mode)",
             "request": "launch",
+            "program": "lib/main.dart",
             "type": "dart",
             "flutterMode": "profile",
             "preLaunchTask": "Copy Shaders to Assets"
         },
         {
             "name": "shaders (release mode)",
+            "program": "lib/main.dart",
             "request": "launch",
             "type": "dart",
             "flutterMode": "release",

assets/screenshots/clearly-bug-shader.png

@@ -0,0 +1,45 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:shaders/fullscreen_shader_widget.dart';
+import 'package:shaders/main.dart';
+import 'package:flutter/material.dart';
+
+void main() async {
+  final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('Shader Screenshot Tests', () {
+    for (final shaderInfo in shaders) {
+      testWidgets('Screenshot for ${shaderInfo.name}', (WidgetTester tester) async {
+        // Build the fullscreen shader widget
+        // set tester size to 16:9
+
+        await tester.pumpWidget(
+          MaterialApp(
+            debugShowCheckedModeBanner: false,
+            home: Scaffold(
+              body: AspectRatio(
+                aspectRatio: 16 / 9,
+                child: FullscreenShaderWidget(
+                  shaderInfo: shaderInfo,
+                ),
+              ),
+            ),
+          ),
+        );
+        await binding.convertFlutterSurfaceToImage();
+
+        // Wait for the shader to initialize and animate a bit
+        await tester.pump(const Duration(milliseconds: 1000));
+        await tester.pump(const Duration(milliseconds: 1000));
+
+        // Take a screenshot
+        await tester.binding.delayed(const Duration(milliseconds: 100));
+
+        // Save the screenshot with a specific filename
+        final screenshotData = await binding.takeScreenshot(shaderInfo.path);
+
+        print('Screenshot taken for ${shaderInfo.name} of size: ${screenshotData.length} bytes');
+      });
+    }
+  });
+}

assets/screenshots/crt-shader.png

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_shaders/flutter_shaders.dart';
+import 'main.dart';
+
+/// A widget that displays a shader in full screen for screenshot purposes
+class FullscreenShaderWidget extends StatefulWidget {
+  final ShaderInfo shaderInfo;
+
+  const FullscreenShaderWidget({
+    super.key,
+    required this.shaderInfo,
+  });
+
+  @override
+  State<FullscreenShaderWidget> createState() => _FullscreenShaderWidgetState();
+}
+
+class _FullscreenShaderWidgetState extends State<FullscreenShaderWidget> with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    final duration = widget.shaderInfo.builder.animationDuration;
+
+    if (duration != null) {
+      // Bounded animation
+      _controller = AnimationController(vsync: this, duration: duration);
+      _controller.forward();
+    } else {
+      // Unbounded animation - use a long duration
+      _controller = AnimationController(
+        vsync: this,
+        duration: const Duration(seconds: 3600),
+      );
+      _controller.forward();
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        return AnimatedBuilder(
+          animation: _controller,
+          builder: (context, child) {
+            return ShaderBuilder(
+              assetKey: widget.shaderInfo.assetKey,
+              (context, shader, _) {
+                final duration = widget.shaderInfo.builder.animationDuration;
+                double timeValue;
+
+                if (duration != null) {
+                  // Bounded animation - use a simple normalized value
+                  timeValue = _controller.value;
+                } else {
+                  // Unbounded animation - use controller value as continuous time
+                  timeValue = _controller.value * _controller.duration!.inSeconds;
+                }
+
+                widget.shaderInfo.builder.setUniforms(shader, constraints.biggest, timeValue);
+
+                return SizedBox.expand(
+                  child: widget.shaderInfo.builder.buildShader(
+                    widget.shaderInfo.metadata,
+                    shader,
+                    constraints.biggest,
+                    timeValue,
+                    widget.shaderInfo.builder.childBuilder(context),
+                  ),
+                );
+              },
+            );
+          },
+        );
+      },
+    );
+  }
+}

assets/screenshots/noise-overlay-shader.png

@@ -4,6 +4,7 @@ import 'package:flutter_web_plugins/url_strategy.dart';
 import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
+import 'package:shaders/widgets/shader_card.dart';
 import 'package:shaders/widgets/widgets.dart';
 
 import 'shader_builder.dart';
@@ -262,12 +263,12 @@ class ContentGrid extends StatelessWidget {
             crossAxisCount: crossAxisCount,
             crossAxisSpacing: 16,
             mainAxisSpacing: 16,
-            childAspectRatio: 4 / 3,
+            childAspectRatio: 1,
           ),
           itemCount: shaders.length,
           itemBuilder: (context, index) {
             final shaderInfo = shaders[index];
-            return _ShaderCard(
+            return ShaderCard(
               shaderInfo: shaderInfo,
               onTap: () {
                 context.go('/shader/${shaderInfo.path}');
@@ -280,37 +281,6 @@ class ContentGrid extends StatelessWidget {
   }
 }
 
-class _ShaderCard extends StatelessWidget {
-  const _ShaderCard({required this.shaderInfo, required this.onTap});
-
-  final ShaderInfo shaderInfo;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    return InkWell(
-      onTap: onTap,
-      borderRadius: BorderRadius.circular(8),
-      child: ShadCard(
-        title: Text(shaderInfo.name),
-        footer: Text.rich(
-          TextSpan(
-            children: [
-              TextSpan(text: 'by ${shaderInfo.author}'),
-            ],
-          ),
-          style: ShadTheme.of(context).textTheme.small,
-        ),
-        description: Text(
-          shaderInfo.description,
-          maxLines: 2,
-          overflow: TextOverflow.ellipsis,
-        ),
-      ),
-    );
-  }
-}
-
 extension on TargetPlatform {
   bool get isDesktop {
     return this == TargetPlatform.macOS || this == TargetPlatform.windows || this == TargetPlatform.linux;