Merge pull request #3 from JulienDev/main

add tint color support

Author: kekland

README.md

@@ -15,7 +15,7 @@ See the example folder for a complete example.
 ```dart
 import 'package:progressive_blur/progressive_blur.dart';
 
-// Simple gradient blur
+// Simple gradient blur with optional tint
 ProgressiveBlurWidget(
   sigma: 24.0,
   linearGradientBlur: const LinearGradientBlur(
@@ -24,6 +24,7 @@ ProgressiveBlurWidget(
     start: Alignment.topCenter,
     end: Alignment.bottomCenter,
   ),
+  tintColor: Colors.orange.withOpacity(0.3), //optional
   child: ...
 );
 
@@ -33,6 +34,7 @@ ProgressiveBlurWidget(
 ProgressiveBlurWidget.custom(
   sigma: 24.0,
   blurTexture: [instance of ui.Image],
+  tintColor: Colors.purple.withOpacity(0.4), // optional
   child: ...,
 )
 ```

example/android/app/src/debug/AndroidManifest.xml

@@ -1,4 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET"/>
+
     <application
         android:label="example"
         android:name="${applicationName}"

example/android/app/src/main/AndroidManifest.xml

@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:math' as math;
 
 import 'package:example/albums.dart';
 import 'package:figma_squircle/figma_squircle.dart';
@@ -76,8 +77,7 @@ class _MainPageState extends State<MainPage> {
               sliver: SliverLayoutBuilder(
                 builder: (context, constraints) {
                   const preferredItemSize = 160.0;
-                  final crossAxisCount =
-                      (constraints.crossAxisExtent / preferredItemSize).floor();
+                  final crossAxisCount = math.max(1, (constraints.crossAxisExtent / preferredItemSize).floor());
 
                   return SliverGrid.builder(
                     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
@@ -192,6 +192,7 @@ class _AlbumCardState extends State<_AlbumCard>
             cornerSmoothing: 0.6,
           ),
           child: ProgressiveBlurWidget(
+            tintColor: Colors.black.withValues(alpha: 0.5),
             linearGradientBlur: const LinearGradientBlur(
               values: [0, 1],
               stops: [0.5, 0.8],

example/android/app/src/profile/AndroidManifest.xml

@@ -241,7 +241,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.0"
+    version: "0.0.1"
   proj4dart:
     dependency: transitive
     description:
@@ -353,4 +353,4 @@ packages:
     version: "2.0.0"
 sdks:
   dart: ">=3.7.0-0 <4.0.0"
-  flutter: ">=3.27.0"
+  flutter: ">=3.30.0"

example/lib/main.dart

@@ -27,13 +27,15 @@ class ProgressiveBlurWidget extends StatefulWidget {
     required this.sigma,
     required this.child,
     this.blurTextureDimensions = 128,
+    this.tintColor = Colors.transparent,
   }) : blurTexture = null;
 
   const ProgressiveBlurWidget.custom({
     super.key,
     required this.blurTexture,
     required this.sigma,
     required this.child,
+    this.tintColor = Colors.transparent,
   })  : linearGradientBlur = null,
         // Irrelevant in case of a custom blur texture
         blurTextureDimensions = -1;
@@ -63,6 +65,9 @@ class ProgressiveBlurWidget extends StatefulWidget {
   /// The standard deviation of the Gaussian blur.
   final double sigma;
 
+  /// Tint color to apply to the blurred area.
+  final Color tintColor;
+
   /// The widget to be blurred.
   final Widget child;
 
@@ -148,6 +153,10 @@ class _ProgressiveBlurWidgetState extends State<ProgressiveBlurWidget> {
               shader.setFloat(1, scaledSize.height); // child_size.y
               shader.setFloat(2, widget.sigma); // blur_sigma
               shader.setFloat(3, 0.0); // blur_direction
+              shader.setFloat(4, widget.tintColor.r); // tint.r
+              shader.setFloat(5, widget.tintColor.g); // tint.g
+              shader.setFloat(6, widget.tintColor.b); // tint.b
+              shader.setFloat(7, widget.tintColor.a); // tint.a
 
               // Draw the first pass
               final paint = Paint()..shader = shader;

example/pubspec.lock

@@ -10,14 +10,17 @@ uniform sampler2D blur_texture;
 uniform float blur_sigma;
 uniform float blur_direction; // 0 for horizontal, 1 for vertical
 
+uniform vec4 tint_color;
+
 out vec4 frag_color;
 
 void main() {
   vec2 uv = FlutterFragCoord().xy / child_size;
 
   // Squaring the blur texture value makes it look more consistent?
-  float sigma = blur_sigma * (pow(texture(blur_texture, uv).r, 2));
-  vec2 dir = blur_direction == 0.0? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  float blur_value = pow(texture(blur_texture, uv).r, 2.0);
+  float sigma = blur_sigma * blur_value;
+  vec2 dir = blur_direction == 0.0 ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
 
   if (sigma < 1e-5) {
     frag_color = texture(child_texture, uv);
@@ -46,6 +49,8 @@ void main() {
 
     color += texture(child_texture, uv + offset) * weight;
   }
-  
-  frag_color = color / total_weight;
+
+  vec4 blurred = color / total_weight;
+  float tint_strength = blur_value * tint_color.a;
+  frag_color = mix(blurred, tint_color, tint_strength);
 }