feat: add aspect ratio support to ShaderInfo and update ShaderAnimationView for responsive layout

Author: orestesgaolin

lib/main.dart

@@ -35,6 +35,7 @@ class ShaderInfo {
   final String path;
   final EdgeInsetsGeometry? padding;
   final Color? backgroundColor;
+  final double? aspectRatio;
 
   const ShaderInfo({
     required this.name,
@@ -47,6 +48,7 @@ class ShaderInfo {
     required this.path,
     this.padding,
     this.backgroundColor,
+    this.aspectRatio,
   });
 
   ShaderMetadata get metadata => ShaderMetadata(
@@ -108,6 +110,7 @@ final shaders = [
     dateAdded: DateTime(2025, 7, 29),
     builder: const RingsShaderBuilder(),
     path: 'rings-shader',
+    aspectRatio: 1,
   ),
   ShaderInfo(
     name: 'Clearly a Bug',
@@ -130,6 +133,7 @@ final shaders = [
     path: 'ai-assistant',
     padding: EdgeInsets.all(32),
     backgroundColor: Colors.black,
+    aspectRatio: 1,
   ),
 ];
 

lib/widgets/shader_animation_view.dart

@@ -52,62 +52,75 @@ class _ShaderAnimationViewState extends State<ShaderAnimationView> with SingleTi
 
   @override
   Widget build(BuildContext context) {
-    return ColoredBox(
-      color: widget.shaderInfo.backgroundColor ?? Colors.transparent,
-      child: Padding(
-        padding: widget.shaderInfo.padding ?? EdgeInsets.zero,
-        child: LayoutBuilder(
-          builder: (context, size) {
-            return AnimatedBuilder(
-              animation: _controller,
-              builder: (context, child) {
-                return ShaderBuilder(
-                  assetKey: widget.shaderInfo.assetKey,
-                  (context, shader, _) {
-                    final duration = widget.shaderInfo.builder.animationDuration;
-                    double timeValue;
+    Widget child = Padding(
+      padding: widget.shaderInfo.padding ?? EdgeInsets.zero,
+      child: LayoutBuilder(
+        builder: (context, size) {
+          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 animated value between 0-1
-                      final animation = TweenSequence<double>([
-                        TweenSequenceItem(
-                          tween: Tween<double>(
-                            begin: 0.0,
-                            end: 1.0,
-                          ).chain(CurveTween(curve: Curves.easeInOut)),
-                          weight: 50.0,
-                        ),
-                        TweenSequenceItem(
-                          tween: Tween<double>(
-                            begin: 1.0,
-                            end: 0.0,
-                          ).chain(CurveTween(curve: Curves.easeInOut)),
-                          weight: 50.0,
-                        ),
-                      ]).animate(_controller);
-                      timeValue = animation.value;
-                    } else {
-                      // Unbounded animation - use controller value as continuous time
-                      // Scale the 0-1 controller value to actual time in seconds
-                      timeValue = _controller.value * _controller.duration!.inSeconds;
-                    }
+                  if (duration != null) {
+                    // Bounded animation - use animated value between 0-1
+                    final animation = TweenSequence<double>([
+                      TweenSequenceItem(
+                        tween: Tween<double>(
+                          begin: 0.0,
+                          end: 1.0,
+                        ).chain(CurveTween(curve: Curves.easeInOut)),
+                        weight: 50.0,
+                      ),
+                      TweenSequenceItem(
+                        tween: Tween<double>(
+                          begin: 1.0,
+                          end: 0.0,
+                        ).chain(CurveTween(curve: Curves.easeInOut)),
+                        weight: 50.0,
+                      ),
+                    ]).animate(_controller);
+                    timeValue = animation.value;
+                  } else {
+                    // Unbounded animation - use controller value as continuous time
+                    // Scale the 0-1 controller value to actual time in seconds
+                    timeValue = _controller.value * _controller.duration!.inSeconds;
+                  }
 
-                    widget.shaderInfo.builder.setUniforms(shader, size.biggest, timeValue);
+                  widget.shaderInfo.builder.setUniforms(shader, size.biggest, timeValue);
 
-                    return widget.shaderInfo.builder.buildShader(
-                      widget.shaderInfo.metadata,
-                      shader,
-                      size.biggest,
-                      timeValue,
-                      widget.shaderInfo.builder.childBuilder(context),
-                    );
-                  },
-                );
-              },
-            );
-          },
-        ),
+                  return widget.shaderInfo.builder.buildShader(
+                    widget.shaderInfo.metadata,
+                    shader,
+                    size.biggest,
+                    timeValue,
+                    widget.shaderInfo.builder.childBuilder(context),
+                  );
+                },
+              );
+            },
+          );
+        },
       ),
     );
+
+    if (widget.shaderInfo.aspectRatio != null) {
+      child = AspectRatio(
+        aspectRatio: widget.shaderInfo.aspectRatio!,
+        child: child,
+      );
+    }
+
+    if (widget.shaderInfo.backgroundColor != null) {
+      child = ColoredBox(
+        color: widget.shaderInfo.backgroundColor!,
+        child: Center(child: child),
+      );
+    }
+
+    return child;
   }
 }