-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #337 from AyaNady17/Feature/implement-notification…
…-screen-ui [UI] Notifications Screen with mock data
- Loading branch information
Showing
6 changed files
with
185 additions
and
3 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| class NotificationModel { | ||
| final String title; | ||
| final String message; | ||
| final DateTime dateTime; | ||
| final bool isRead; | ||
|
|
||
| NotificationModel({ | ||
| required this.title, | ||
| required this.message, | ||
| required this.dateTime, | ||
| this.isRead = false, | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:get/get.dart'; | ||
| import 'package:resonate/models/mock_models/notification_model.dart'; | ||
| import 'package:resonate/views/new_screens/new_profile_screen.dart'; | ||
|
|
||
| class NewNotificationsScreen extends StatelessWidget { | ||
| final List<NotificationModel> notifications = getMockNotifications(); | ||
|
|
||
| NewNotificationsScreen({super.key}); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Scaffold( | ||
| appBar: AppBar( | ||
| backgroundColor: Theme.of(context).colorScheme.background, | ||
| elevation: 0, | ||
| leading: IconButton( | ||
| icon: const Icon( | ||
| Icons.keyboard_arrow_down, | ||
| // color: Colors.black, | ||
| size: 36, | ||
| ), | ||
| onPressed: () => Navigator.of(context).pop(), | ||
| ), | ||
| title: const Text('Notifications'), | ||
| actions: [ | ||
| Padding( | ||
| padding: const EdgeInsets.only(right: 16.0, left: 16), | ||
| child: InkWell( | ||
| child: const CircleAvatar( | ||
| backgroundImage: AssetImage( | ||
| "assets/images/user.jpeg", | ||
| ), | ||
| ), | ||
| onTap: () { | ||
| Get.to(NewProfileScreen()); | ||
| }, | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| body: Padding( | ||
| padding: const EdgeInsets.all(16.0), | ||
| child: AnimatedList( | ||
| initialItemCount: notifications.length, | ||
| itemBuilder: (context, index, animation) { | ||
| final notification = notifications[index]; | ||
| return Card( | ||
| color: Theme.of(context).colorScheme.primary, | ||
| shape: RoundedRectangleBorder( | ||
| borderRadius: BorderRadius.circular(20.0), | ||
| ), | ||
| elevation: 5, | ||
| shadowColor: Colors.grey.shade300, | ||
| margin: const EdgeInsets.symmetric(vertical: 10.0), | ||
| child: ListTile( | ||
| contentPadding: const EdgeInsets.symmetric( | ||
| horizontal: 20.0, vertical: 15.0), | ||
| leading: CircleAvatar( | ||
| backgroundColor: notification.isRead | ||
| ? Colors.grey.shade300 | ||
| : Colors.blue.shade100, | ||
| child: Icon( | ||
| notification.isRead | ||
| ? Icons.notifications_none | ||
| : Icons.notifications, | ||
| color: notification.isRead ? Colors.grey : Colors.blue, | ||
| ), | ||
| ), | ||
| title: Text( | ||
| notification.title, | ||
| style: TextStyle( | ||
| fontWeight: FontWeight.bold, | ||
| fontSize: 18.0, | ||
| color: Theme.of(context).colorScheme.onPrimary, | ||
| ), | ||
| ), | ||
| subtitle: Column( | ||
| crossAxisAlignment: CrossAxisAlignment.start, | ||
| children: [ | ||
| const SizedBox(height: 8), | ||
| Text( | ||
| notification.message, | ||
| style: TextStyle( | ||
| fontSize: 16.0, | ||
| color: Theme.of(context).colorScheme.secondary, | ||
| ), | ||
| ), | ||
| const SizedBox(height: 8), | ||
| Text( | ||
| _formatDateTime(notification.dateTime), | ||
| style: TextStyle( | ||
| fontSize: 14.0, | ||
| color: Colors.grey.shade500, | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| trailing: Icon(Icons.arrow_forward_ios, | ||
| size: 16.0, color: Colors.grey.shade400), | ||
| onTap: () { | ||
| // Handle notification tap | ||
| }, | ||
| ), | ||
| ); | ||
| }, | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| String _formatDateTime(DateTime dateTime) { | ||
| final now = DateTime.now(); | ||
| final difference = now.difference(dateTime); | ||
|
|
||
| if (difference.inMinutes < 60) { | ||
| return '${difference.inMinutes} minutes ago'; | ||
| } else if (difference.inHours < 24) { | ||
| return '${difference.inHours} hours ago'; | ||
| } else if (difference.inDays < 7) { | ||
| return '${difference.inDays} days ago'; | ||
| } else { | ||
| return dateTime.toIso8601String(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| List<NotificationModel> getMockNotifications() { | ||
| return [ | ||
| NotificationModel( | ||
| title: "Welcome to Resonate!", | ||
| message: "Start by exploring rooms and joining conversations.", | ||
| dateTime: DateTime.now().subtract(const Duration(minutes: 5)), | ||
| ), | ||
| NotificationModel( | ||
| title: "New Follow Request", | ||
| message: "John Doe has requested to follow you.", | ||
| dateTime: DateTime.now().subtract(const Duration(hours: 1)), | ||
| ), | ||
| NotificationModel( | ||
| title: "Room Recommendation", | ||
| message: "Join the 'Flutter Developers' room happening now.", | ||
| dateTime: DateTime.now().subtract(const Duration(days: 1)), | ||
| isRead: true, | ||
| ), | ||
| NotificationModel( | ||
| title: "Room Recommendation", | ||
| message: "Join the 'Flutter Developers' room happening now.", | ||
| dateTime: DateTime.now().subtract(const Duration(days: 1)), | ||
| isRead: true, | ||
| ), | ||
| NotificationModel( | ||
| title: "New Follow Request", | ||
| message: "John Doe has requested to follow you.", | ||
| dateTime: DateTime.now().subtract(const Duration(hours: 1)), | ||
| ), | ||
| ]; | ||
| } |