Change Notifications Screen Design DONE

lib/views/pages/user/notifications/notifications_list.dart

@@ -1,9 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:test_sa/controllers/localization/localization.dart';
 import 'package:test_sa/extensions/context_extension.dart';
+import 'package:test_sa/extensions/widget_extensions.dart';
 import 'package:test_sa/models/system_notification_model.dart';
-import 'package:test_sa/models/subtitle.dart';
-import 'package:test_sa/views/pages/user/requests/future_request_service_details.dart';
 import 'package:test_sa/views/widgets/loaders/lazy_loading.dart';
 import 'package:test_sa/views/widgets/loaders/no_item_found.dart';
 import 'package:test_sa/views/widgets/notifications/notification_item.dart';
@@ -17,28 +15,35 @@ class NotificationsList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-
+    if (notifications.isEmpty) {
-    if (notifications.length == 0) {
+      return NoItemFound(message: context.translation.notificationsNotFound);
-      return NoItemFound(
-        message: context.translation.notificationsNotFound,
-      );
     }
     return LazyLoading(
       nextPage: nextPage,
       onLazyLoad: onLazyLoad,
-      child: ListView.builder(
+      child: SingleChildScrollView(
-          physics: BouncingScrollPhysics(),
+        child: Card(
-          itemCount: notifications.length,
+          child: ListView.builder(
-          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            physics: const NeverScrollableScrollPhysics(),
-          itemBuilder: (context, itemIndex) {
+            itemCount: notifications.length,
-            return NotificationItem(
+            shrinkWrap: true,
-              notification: notifications[itemIndex],
+            itemBuilder: (context, itemIndex) {
-              onPressed: (notification) {
+              return Column(
-                // todo @sikander, check notifications payload, because notification model is different to need to check from backend
+                children: [
-                //Navigator.of(context).pushNamed(FutureRequestServiceDetails.id, arguments: notification.requestId);
+                  NotificationItem(
-              },
+                    notification: notifications[itemIndex],
-            );
+                    onPressed: (notification) {
-          }),
+                      // todo @sikander, check notifications payload, because notification model is different to need to check from backend
+                      //Navigator.of(context).pushNamed(FutureRequestServiceDetails.id, arguments: notification.requestId);
+                    },
+                  ),
+                  if (itemIndex != (notifications.length - 1)) const Divider().defaultStyle(context).paddingOnly(start: 16, end: 16),
+                ],
+              );
+            },
+          ),
+        ),
+      ).paddingAll(16),
     );
   }
 }

lib/views/widgets/notifications/notification_item.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
+import 'package:test_sa/extensions/int_extensions.dart';
+import 'package:test_sa/extensions/string_extensions.dart';
+import 'package:test_sa/extensions/text_extensions.dart';
+import 'package:test_sa/extensions/widget_extensions.dart';
 import 'package:test_sa/models/system_notification_model.dart';
-import 'package:test_sa/views/app_style/colors.dart';
-import 'package:test_sa/views/app_style/sizing.dart';
 
 class NotificationItem extends StatelessWidget {
   final SystemNotificationModel notification;
@@ -11,49 +13,28 @@ class NotificationItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Column(
-      padding: const EdgeInsets.symmetric(vertical: 4),
+      crossAxisAlignment: CrossAxisAlignment.start,
-      child: ElevatedButton(
+      children: [
-        style: ElevatedButton.styleFrom(
+        Row(
-          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
-          primary: AColors.primaryColor,
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(AppStyle.getBorderRadius(context)),
-          ),
-        ),
-        onPressed: () {
-          onPressed(notification);
-        },
-        child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Row(
+            Expanded(
-              children: [
+              child: Column(
-                Expanded(
+                crossAxisAlignment: CrossAxisAlignment.start,
-                  child: Text(
+                children: [
-                    notification.title ?? "No Hospital Found",
+                  (notification.title ?? "No Hospital Found").heading6(context),
-                    style: Theme.of(context).textTheme.headline6.copyWith(color: AColors.white, fontSize: 16, fontWeight: FontWeight.bold),
+                  8.height,
-                  ),
+                  (notification.text ?? "complaint not available").bodyText2(context),
-                ),
+                ],
-                Text(
+              ),
-                  notification.createdOn ?? "complaint not available",
-                  style: Theme.of(context).textTheme.subtitle1.copyWith(color: AColors.white, fontSize: 12, fontWeight: FontWeight.bold),
-                ),
-              ],
-            ),
-            Divider(
-              color: AColors.white,
-            ),
-            Text(
-              notification.text ?? "complaint not available",
-              style: Theme.of(context).textTheme.subtitle1.copyWith(
-                    color: AColors.white,
-                    fontSize: 14,
-                  ),
             ),
+            (notification.createdOn.toServiceRequestCardFormat ?? "complaint not available").tinyFont(context),
           ],
-        ),
+        ).onPress(() {
-      ),
+          onPressed(notification);
-    );
+        }),
+      ],
+    ).paddingAll(16);
   }
 }