fix: [MDS-511] Fix disappearing widgets in mobile web / PWA (#152)

coingaming · Apr 25, 2023 · 7b96ea5 · 7b96ea5
1 parent 4b58cb1
commit 7b96ea5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/lib/src/utils/extensions.dart b/lib/src/utils/extensions.dart
@@ -14,22 +14,24 @@ extension DarkModeX on BuildContext {
 extension BorderRadiusX on BorderRadius {
   /// Returns SmoothBorderRadius.
   SmoothBorderRadius get smoothBorderRadius {
+    // FIXME: CornerSmoothing of 1 creates null pointer dereference error with SmoothRectangleBorder on mobile web/PWA
+    // for some reason. So we use 0.999 instead.
     return SmoothBorderRadius.only(
       topLeft: SmoothRadius(
         cornerRadius: topLeft.x,
-        cornerSmoothing: 1,
+        cornerSmoothing: 0.999,
       ),
       topRight: SmoothRadius(
         cornerRadius: topRight.x,
-        cornerSmoothing: 1,
+        cornerSmoothing: 0.999,
       ),
       bottomLeft: SmoothRadius(
         cornerRadius: bottomLeft.x,
-        cornerSmoothing: 1,
+        cornerSmoothing: 0.999,
       ),
       bottomRight: SmoothRadius(
         cornerRadius: bottomRight.x,
-        cornerSmoothing: 1,
+        cornerSmoothing: 0.999,
       ),
     );
   }

diff --git a/lib/src/widgets/avatar/avatar.dart b/lib/src/widgets/avatar/avatar.dart
@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'package:moon_design/src/theme/avatar/avatar_size_properties.dart';
@@ -180,20 +181,25 @@ class MoonAvatar extends StatelessWidget {
           children: [
             Positioned.fill(
               child: ClipPath(
-                clipper: AvatarClipper(
-                  showBadge: showBadge,
-                  width: effectiveAvatarWidth,
-                  height: effectiveAvatarHeight,
-                  borderRadius: effectiveBorderRadius,
-                  badgeSize: effectiveBadgeSize,
-                  badgeMarginValue: effectiveBadgeMarginValue,
-                  badgeAlignment: badgeAlignment,
-                  textDirection: Directionality.of(context),
-                ),
+                // TODO: Since clipper does not work properly on mobile web/PWA, we are disabling it. Remove this check
+                // when it has been fixed from Flutter side.
+                clipper: kIsWeb && MediaQueryData.fromWindow(WidgetsBinding.instance.window).size.width < 500
+                    ? null
+                    : AvatarClipper(
+                        showBadge: showBadge,
+                        width: effectiveAvatarWidth,
+                        height: effectiveAvatarHeight,
+                        borderRadius: effectiveBorderRadius,
+                        badgeSize: effectiveBadgeSize,
+                        badgeMarginValue: effectiveBadgeMarginValue,
+                        badgeAlignment: badgeAlignment,
+                        textDirection: Directionality.of(context),
+                      ),
                 child: DefaultTextStyle.merge(
                   style: effectiveMoonAvatarSize.textStyle.copyWith(color: effectiveTextColor),
                   child: DecoratedBox(
                     decoration: BoxDecoration(
+                      borderRadius: effectiveBorderRadius,
                       color: effectiveBackgroundColor,
                       image: backgroundImage != null
                           ? DecorationImage(