color blur in tags

compass_app/app/lib/common/themes/colors.dart

@@ -4,6 +4,7 @@ class AppColors {
   static const black1 = Color(0xFF101010);
   static const white1 = Color(0xFFFFF7FA);
   static const grey1 = Color(0xFFF2F2F2);
-  static const grey2 = Color(0xFF4D4D4D); // Figma rgba(255, 255, 255, 0.3)
+  static const grey2 = Color(0xFF4D4D4D);
+  static const whiteTransparent = Color(0x4DFFFFFF); // Figma rgba(255, 255, 255, 0.3)
 }
 

compass_app/app/lib/common/widgets/tag_chip.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:compass_app/common/themes/colors.dart';
 import 'package:compass_app/common/themes/text_styles.dart';
 import 'package:flutter/material.dart';
@@ -14,30 +16,33 @@ class TagChip extends StatelessWidget {
   Widget build(BuildContext context) {
     return ClipRRect(
       borderRadius: BorderRadius.circular(10.0),
-      child: DecoratedBox(
+      child: BackdropFilter(
-        decoration: const BoxDecoration(
+        filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
-          color: AppColors.grey2,
+        child: DecoratedBox(
-        ),
+          decoration: const BoxDecoration(
-        child: SizedBox(
+            color: AppColors.whiteTransparent,
-          height: 20.0,
+          ),
-          child: Padding(
+          child: SizedBox(
-            padding: const EdgeInsets.symmetric(horizontal: 6.0),
+            height: 20.0,
-            child: Row(
+            child: Padding(
-              crossAxisAlignment: CrossAxisAlignment.center,
+              padding: const EdgeInsets.symmetric(horizontal: 6.0),
-              mainAxisSize: MainAxisSize.min,
+              child: Row(
-              children: [
+                crossAxisAlignment: CrossAxisAlignment.center,
-                Icon(
+                mainAxisSize: MainAxisSize.min,
-                  _iconFrom(tag),
+                children: [
-                  color: Colors.white,
+                  Icon(
-                  size: 10,
+                    _iconFrom(tag),
-                ),
+                    color: Colors.white,
-                const SizedBox(width: 4),
+                    size: 10,
-                Text(
+                  ),
-                  tag,
+                  const SizedBox(width: 4),
-                  textAlign: TextAlign.center,
+                  Text(
-                  style: TextStyles.chipTagStyle,
+                    tag,
-                ),
+                    textAlign: TextAlign.center,
-              ],
+                    style: TextStyles.chipTagStyle,
+                  ),
+                ],
+              ),
             ),
           ),
         ),