Improved The layout of Door Lock Page

lib/features/devices/view/widgets/smart_door/door_button.dart

@@ -1,6 +1,10 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_app/generated/assets.dart';
+import 'package:syncrow_app/utils/context_extension.dart';
 import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
 
 class DoorLockButton extends StatefulWidget {
@@ -43,12 +47,16 @@ class _DoorLockButtonState extends State<DoorLockButton>
 
   @override
   Widget build(BuildContext context) {
-    return ConstrainedBox(
-      constraints: const BoxConstraints(maxHeight: 290, minHeight: 290),
+    return Padding(
+      padding: EdgeInsets.only(
+        right: context.width * 0.3 / 2,
+        left: context.width * 0.3 / 2,
+        bottom: context.width * 0.35 / 2,
+      ),
       child: InkWell(
         overlayColor: MaterialStateProperty.all(
-            ColorsManager.primaryColor.withOpacity(.06)),
-        borderRadius: BorderRadius.circular(500),
+            ColorsManager.primaryColorWithOpacity.withOpacity(0.1)),
+        borderRadius: BorderRadius.circular(999),
         onTapDown: (details) {
           if (_animationController.status == AnimationStatus.dismissed) {
             _animationController.forward();
@@ -67,13 +75,12 @@ class _DoorLockButtonState extends State<DoorLockButton>
             _animationController.forward();
           }
         },
-        child: Stack(
-          alignment: Alignment.center,
-          children: [
-            Container(
-              width: 250,
-              decoration: const ShapeDecoration(
-                shadows: [
+        child: Container(
+          width: context.width * 0.55,
+          height: context.width * 0.55,
+          margin: const EdgeInsets.all(10),
+          decoration: const BoxDecoration(
+            boxShadow: [
               BoxShadow(
                 color: Colors.grey,
                 blurRadius: 18,
@@ -82,11 +89,14 @@ class _DoorLockButtonState extends State<DoorLockButton>
               ),
             ],
             color: Color(0xFFEBECED),
-                shape: CircleBorder(),
+            borderRadius: BorderRadius.all(Radius.circular(999)),
           ),
-            ),
-            SizedBox.square(
-              dimension: 215,
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              Padding(
+                padding: const EdgeInsets.all(25),
+                child: SizedBox.expand(
                   child: CircularProgressIndicator(
                     value: _animation.value,
                     backgroundColor: Colors.transparent,
@@ -96,12 +106,15 @@ class _DoorLockButtonState extends State<DoorLockButton>
                     strokeWidth: 10,
                   ),
                 ),
-            const Image(
-              image: AssetImage(Assets.doorlockAssetsDoorlockButtonTwo),
+              ),
+              SvgPicture.asset(
+                Assets.doorlockAssetsDoorlockButtonTwo,
+                fit: BoxFit.fill,
               ),
             ],
           ),
         ),
+      ),
     );
   }
 }

lib/features/devices/view/widgets/smart_door/door_grid.dart

@@ -1,7 +1,11 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_app/features/devices/view/widgets/smart_door/door_interface.dart';
 import 'package:syncrow_app/features/shared_widgets/default_container.dart';
 import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
+import 'package:syncrow_app/generated/assets.dart';
 
 class DoorLockGrid extends StatelessWidget {
   const DoorLockGrid({
@@ -23,23 +27,41 @@ class DoorLockGrid extends StatelessWidget {
         ),
         itemCount: 4,
         itemBuilder: (context, index) => DefaultContainer(
+          onTap: () {
+            //TODO: remove checking after adding the pages
+            doorLockButtons[index]['page'] != null
+                ? Navigator.of(context).push(
+                    MaterialPageRoute(
+                      builder: (context) =>
+                          doorLockButtons[index]['page'] as Widget,
+                    ),
+                  )
+                : null;
+          },
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               ConstrainedBox(
                 constraints: const BoxConstraints(maxHeight: 46, maxWidth: 50),
-                child: Image(
-                  image: AssetImage(doorLockButtons.values.elementAt(index)),
+                child: SvgPicture.asset(
+                  doorLockButtons[index]['image'] as String,
                 ),
+
+                // Image(
+                //   image: AssetImage(doorLockButtons[index]['image'] as String),
+                // ),
               ),
               const SizedBox(
                 height: 15,
               ),
-              BodySmall(
-                text: doorLockButtons.keys.elementAt(index),
+              FittedBox(
+                child: BodySmall(
+                  text: doorLockButtons[index]['title'] as String,
+                  // doorLockButtons.keys.elementAt(index),
                   textAlign: TextAlign.center,
                 ),
+              ),
             ],
           ),
         ),
@@ -47,3 +69,26 @@ class DoorLockGrid extends StatelessWidget {
     );
   }
 }
+
+List<Map<String, dynamic>> doorLockButtons = [
+  {
+    'title': 'Unlocking Records',
+    'image': Assets.doorlockAssetsUnlockingRecords,
+    'page': null,
+  },
+  {
+    'title': 'Memebers Managment',
+    'image': Assets.doorlockAssetsMembersManagement,
+    'page': null,
+  },
+  {
+    'title': 'Temporary Password',
+    'image': Assets.doorlockAssetsTemporaryPassword,
+    'page': null,
+  },
+  {
+    'title': 'Smart Linkage',
+    'image': Assets.doorlockAssetsSmartLinkage,
+    'page': null,
+  },
+];

lib/features/devices/view/widgets/smart_door/door_interface.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:flutter/widgets.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_app/features/devices/model/device_model.dart';
 import 'package:syncrow_app/features/devices/view/widgets/smart_door/door_button.dart';
@@ -9,6 +10,7 @@ import 'package:syncrow_app/features/shared_widgets/default_container.dart';
 import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
 import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
 import 'package:syncrow_app/generated/assets.dart';
+import 'package:syncrow_app/utils/context_extension.dart';
 import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
 import 'package:syncrow_app/utils/resource_manager/constants.dart';
 import 'package:syncrow_app/utils/resource_manager/font_manager.dart';
@@ -56,19 +58,16 @@ class DoorInterface extends StatelessWidget {
                   top: Constants.appBarHeight,
                   left: Constants.defaultPadding,
                   right: Constants.defaultPadding,
-                  // bottom: Constants.bottomNavBarHeight / 2,
                 ),
                 child: const Column(
                   children: [
                     DoorLockStatusBar(),
                     Column(
                       mainAxisAlignment: MainAxisAlignment.center,
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
                       children: [
                         DoorLockButton(),
                         DoorLockGrid(),
-                        SizedBox(
-                          height: 50,
-                        ),
                       ],
                     )
                   ],
@@ -79,10 +78,3 @@ class DoorInterface extends StatelessWidget {
     );
   }
 }
-
-Map<String, String> doorLockButtons = {
-  'Unlocking Records': Assets.doorlockAssetsUnlockingRecords,
-  'Memebers Managment': Assets.doorlockAssetsMembersManagement,
-  'Temporary Password': Assets.doorlockAssetsTemporaryPassword,
-  'Smart Linkage': Assets.doorlockAssetsSmartLinkage,
-};

lib/utils/resource_manager/constants.dart

@@ -3,6 +3,8 @@ import 'package:syncrow_app/features/devices/model/function_model.dart';
 import 'package:syncrow_app/generated/assets.dart';
 
 abstract class Constants {
+  static const String appName = "Syncrow App";
+
   static const String languageCode = "en";
 
   static const String countryCode = "US";