TF-248 Update UI for web

core/lib/presentation/utils/responsive_utils.dart

@@ -2,18 +2,18 @@ import 'package:flutter/widgets.dart';
 
 class ResponsiveUtils {
 
-  static const int minDesktopWidth = 1366;
+  static const int minDesktopWidth = 1288;
   static const int minTabletWidth = 600;
-  static const int minTabletLargeWidth = 800;
+  static const int minTabletLargeWidth = 900;
 
   static const double _loginTextFieldWidthSmallScreen = 280.0;
   static const double _loginTextFieldWidthLargeScreen = 320.0;
   static const double _loginButtonWidth = 240.0;
 
-  static const double _tabletHorizontalMargin = 144.0;
-  static const double _tabletVerticalMargin = 234.0;
-  static const double _desktopVerticalMargin = 144.0;
-  static const double _desktopHorizontalMargin = 234.0;
+  static const double _tabletHorizontalMargin = 120.0;
+  static const double _tabletVerticalMargin = 200.0;
+  static const double _desktopVerticalMargin = 120.0;
+  static const double _desktopHorizontalMargin = 200.0;
 
   bool isMobileDevice(BuildContext context) => MediaQuery.of(context).size.shortestSide < 600;
 
@@ -29,7 +29,7 @@ class ResponsiveUtils {
 
   bool isDesktop(BuildContext context) => getSizeWidthScreen(context) > minDesktopWidth;
 
-  bool isTabletLarge(BuildContext context) => getMinSizeScreen(context) >= minTabletLargeWidth && getMinSizeScreen(context) <= minDesktopWidth;
+  bool isTabletLarge(BuildContext context) => getSizeWidthScreen(context) >= minTabletLargeWidth && getSizeWidthScreen(context) <= minDesktopWidth;
 
   bool isPortrait(BuildContext context) => MediaQuery.of(context).orientation == Orientation.portrait;
 
@@ -48,7 +48,7 @@ class ResponsiveUtils {
         : EdgeInsets.symmetric(
             horizontal: _tabletHorizontalMargin,
             vertical: _tabletVerticalMargin);
-    } else if (isDesktop(context)) {
+    } else if (isDesktop(context) || isTabletLarge(context)) {
       return getSizeHeightScreen(context) <= _desktopVerticalMargin * 2
         ? EdgeInsets.symmetric(
             horizontal: _desktopHorizontalMargin,
@@ -66,12 +66,12 @@ class ResponsiveUtils {
       return getSizeHeightScreen(context) <= _tabletVerticalMargin * 2
           ? BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius))
           : BorderRadius.circular(radius);
-    } else if (isDesktop(context)) {
+    } else if (isDesktop(context) || isTabletLarge(context)) {
       return getSizeHeightScreen(context) <= _desktopVerticalMargin * 2
           ? BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius))
           : BorderRadius.circular(radius);
     } else {
-      return BorderRadius.zero;
+      return BorderRadius.only(topLeft: Radius.circular(radius), topRight: Radius.circular(radius));
     }
   }
 }

core/lib/presentation/views/floating_button/scrolling_floating_button_animated.dart

@@ -123,6 +123,10 @@ class _ScrollingFloatingButtonAnimatedState
 
   @override
   Widget build(BuildContext context) {
+    final shortestSide = MediaQuery.of(context).size.shortestSide;
+    if (shortestSide < 60) {
+      return SizedBox.shrink();
+    }
     return Card(
       elevation: widget.elevation,
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(widget.height! / 2))),

core/lib/presentation/views/image/avatar_builder.dart

@@ -1,6 +1,5 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
-// import 'package:flutter_svg/flutter_svg.dart';
 
 typedef OnTapAvatarActionClick = void Function();
 
@@ -8,7 +7,6 @@ class AvatarBuilder {
   Key? _key;
   String? _text;
   double? _size;
-  // String? _iconStatus;
   Color? _bgColor;
   Color? _textColor;
   OnTapAvatarActionClick? _onTapAvatarActionClick;
@@ -27,11 +25,6 @@ class AvatarBuilder {
     _text = text;
   }
 
-  // AvatarBuilder iconStatus(String iconStatus) {
-  //   _iconStatus = iconStatus;
-  //   return this;
-  // }
-
   void backgroundColor(Color bgColor) {
     _bgColor = bgColor;
   }
@@ -62,15 +55,19 @@ class AvatarBuilder {
         key: _key,
         width: _size ?? 40,
         height: _size ?? 40,
+        padding: EdgeInsets.zero,
+        margin: EdgeInsets.zero,
         alignment: Alignment.center,
         child: Stack(
           children: [
             Container(
               width: _size ?? 40,
               height: _size ?? 40,
+              padding: EdgeInsets.zero,
+              margin: EdgeInsets.zero,
               alignment: Alignment.center,
               decoration: BoxDecoration(
-                borderRadius: BorderRadius.circular((_size ?? 40) / 2),
+                borderRadius: BorderRadius.circular((_size ?? 40) * 0.5),
                 border: Border.all(color: Colors.transparent),
                 boxShadow: _boxShadows ?? [],
                 gradient: _avatarColors?.isNotEmpty == true
@@ -80,14 +77,13 @@ class AvatarBuilder {
                       tileMode: TileMode.decal,
                       colors: _avatarColors ?? [])
                   : null,
-                color: _bgColor ?? AppColor.avatarColor),
+                color: _bgColor ?? AppColor.avatarColor
+              ),
               child: Text(
                 '${_text ?? ''}',
-                style: TextStyle(fontSize: 20, color: _textColor ?? AppColor.avatarTextColor, fontWeight: FontWeight.w500))),
-            // if (_iconStatus != null && _iconStatus!.isNotEmpty)
-            //   Align(
-            //     child: SvgPicture.asset(_iconStatus!, width: 12, height: 12, fit: BoxFit.fill),
-            //     alignment: Alignment.bottomRight)
+                style: TextStyle(fontSize: 20, color: _textColor ?? AppColor.avatarTextColor, fontWeight: FontWeight.w500)
+              )
+            ),
           ],
         )),
     );