Refine milky Dock and refract symbols beneath the moving lens

mobile/test/widgets/glass_material_test.dart

@@ -9,6 +9,42 @@ import 'package:hepan_everyday/widgets/glass_dock.dart';
 import 'package:hepan_everyday/widgets/glass_refraction.dart';
 
 void main() {
+  testWidgets(
+    'zero-blur glass bends an already-painted symbol without erasing it',
+    (tester) async {
+      final plain = await _render(
+        tester,
+        const GlassRefraction(
+          strength: 0,
+          blurSigma: 0,
+          child: SizedBox.expand(),
+        ),
+        opticalSymbol: true,
+      );
+      final bent = await _render(
+        tester,
+        const GlassRefraction(
+          strength: 0.52,
+          blurSigma: 0,
+          child: SizedBox.expand(),
+        ),
+        opticalSymbol: true,
+      );
+      var changed = 0, plainBlue = 0, bentBlue = 0;
+      for (var y = 16; y < 50; y++) {
+        for (var x = 5; x < 52; x++) {
+          final before = _channel(plain, x, y, 0);
+          final after = _channel(bent, x, y, 0);
+          if ((before - after).abs() > 20) changed++;
+          if (_channel(plain, x, y, 2) - before > 100) plainBlue++;
+          if (_channel(bent, x, y, 2) - after > 100) bentBlue++;
+        }
+      }
+      expect(changed, greaterThan(20));
+      expect(bentBlue, greaterThan(plainBlue * 0.7));
+    },
+    skip: !ui.ImageFilter.isShaderFilterSupported,
+  );
   testWidgets(
     'Dock has a milky white body while transmitting a dark backdrop',
     (tester) async {
@@ -23,8 +59,8 @@ void main() {
       // while its original cool colour remains visible through the material.
       final red = _channel(pixels, 160, 43, 0);
       final green = _channel(pixels, 160, 43, 1);
-      expect(red, greaterThan(50));
-      expect(red, lessThan(80));
+      expect(red, greaterThan(75));
+      expect(red, lessThan(112));
       expect(green - red, closeTo(13, 6));
     },
   );
@@ -190,6 +226,7 @@ Future<ByteData> _render(
   Offset offset = Offset.zero,
   Color backdropColor = const Color(0xFF14B4E6),
   bool held = false,
+  bool opticalSymbol = false,
 }) async {
   tester.view.physicalSize = const Size(800, 600);
   tester.view.devicePixelRatio = 1;
@@ -217,6 +254,7 @@ Future<ByteData> _render(
                         gradient,
                         stripeWidth,
                         backdropColor,
+                        opticalSymbol,
                       ),
                     ),
                   ),
@@ -303,14 +341,40 @@ Future<ByteData> _render(
 }
 
 class _Backdrop extends CustomPainter {
-  const _Backdrop(this.stripes, this.gradient, this.stripeWidth, this.colour);
+  const _Backdrop(
+    this.stripes,
+    this.gradient,
+    this.stripeWidth,
+    this.colour,
+    this.opticalSymbol,
+  );
   final bool stripes;
   final bool gradient;
   final double stripeWidth;
   final Color colour;
+  final bool opticalSymbol;
 
   @override
   void paint(Canvas canvas, Size size) {
+    if (opticalSymbol) {
+      canvas.drawRect(Offset.zero & size, Paint()..color = Colors.white);
+      canvas.drawRRect(
+        RRect.fromRectAndRadius(
+          const Rect.fromLTWH(10, 20, 28, 25),
+          const Radius.circular(3),
+        ),
+        Paint()..color = const Color(0xFF007AFF),
+      );
+      for (var row = 0; row < 2; row++) {
+        for (var col = 0; col < 3; col++) {
+          canvas.drawRect(
+            Rect.fromLTWH(15 + col * 7, 26 + row * 8, 4, 4),
+            Paint()..color = Colors.white,
+          );
+        }
+      }
+      return;
+    }
     if (gradient) {
       for (var x = 0; x < size.width; x++) {
         canvas.drawRect(