| import 'package:flutter/material.dart'; | |
| import 'package:shared_preferences/shared_preferences.dart'; | |
| import '/models/conversations.dart'; | |
| import '/models/messages.dart'; | |
| import '/utils/storage/messages.dart'; | |
| 
 | |
| String convertToAgo(String input){ | |
|   DateTime time = DateTime.parse(input); | |
|   Duration diff = DateTime.now().difference(time); | |
| 
 | |
|   if(diff.inDays >= 1){ | |
|     return '${diff.inDays} day${diff.inDays == 1 ? "" : "s"} ago'; | |
|   } | |
|   if(diff.inHours >= 1){ | |
|     return '${diff.inHours} hour${diff.inHours == 1 ? "" : "s"} ago'; | |
|   } | |
|   if(diff.inMinutes >= 1){ | |
|     return '${diff.inMinutes} minute${diff.inMinutes == 1 ? "" : "s"} ago'; | |
|   } | |
|   if (diff.inSeconds >= 1){ | |
|     return '${diff.inSeconds} second${diff.inSeconds == 1 ? "" : "s"} ago'; | |
|   } | |
|   return 'just now'; | |
| } | |
| 
 | |
| class ConversationDetail extends StatefulWidget{ | |
|   final Conversation conversation; | |
|   const ConversationDetail({ | |
|     Key? key, | |
|     required this.conversation, | |
|   }) : super(key: key); | |
| 
 | |
|   @override | |
|   _ConversationDetailState createState() => _ConversationDetailState(); | |
| 
 | |
| } | |
| 
 | |
| class _ConversationDetailState extends State<ConversationDetail> { | |
|   List<Message> messages = []; | |
|   String username = ''; | |
| 
 | |
|   TextEditingController msgController = TextEditingController(); | |
| 
 | |
|   @override | |
|   void initState() { | |
|     super.initState(); | |
|     fetchMessages(); | |
|   } | |
| 
 | |
|   Future<void> fetchMessages() async { | |
|     final preferences = await SharedPreferences.getInstance(); | |
|     username = preferences.getString('username')!; | |
|     messages = await getMessagesForThread(widget.conversation); | |
|     setState(() {}); | |
|   } | |
| 
 | |
|   @override | |
|   Widget build(BuildContext context) { | |
|     return Scaffold( | |
|         appBar: AppBar( | |
|             elevation: 0, | |
|             automaticallyImplyLeading: false, | |
|             backgroundColor: Colors.white, | |
|             flexibleSpace: SafeArea( | |
|                 child: Container( | |
|                     padding: const EdgeInsets.only(right: 16), | |
|                     child: Row( | |
|                         children: <Widget>[ | |
|                           IconButton( | |
|                               onPressed: (){ | |
|                                 Navigator.pop(context); | |
|                               }, | |
|                               icon: const Icon(Icons.arrow_back,color: Colors.black,), | |
|                           ), | |
|                           const SizedBox(width: 2,), | |
|                           Expanded( | |
|                               child: Column( | |
|                                   crossAxisAlignment: CrossAxisAlignment.start, | |
|                                   mainAxisAlignment: MainAxisAlignment.center, | |
|                                   children: <Widget>[ | |
|                                     Text( | |
|                                         widget.conversation.name, | |
|                                         style: const TextStyle( | |
|                                             fontSize: 16, | |
|                                             fontWeight: FontWeight.w600), | |
|                                     ), | |
|                                   ], | |
|                               ), | |
|                           ), | |
|                           const Icon(Icons.settings,color: Colors.black54), | |
|                         ], | |
|                       ), | |
|                     ), | |
|                   ), | |
|                 ), | |
|                 body: Stack( | |
|                     children: <Widget>[ | |
|                       ListView.builder( | |
|                           itemCount: messages.length, | |
|                           shrinkWrap: true, | |
|                           padding: const EdgeInsets.only(top: 10,bottom: 90), | |
|                           reverse: true, | |
|                           itemBuilder: (context, index) { | |
|                             return Container( | |
|                                 padding: const EdgeInsets.only(left: 14,right: 14,top: 0,bottom: 0), | |
|                                 child: Align( | |
|                                     alignment: ( | |
|                                         messages[index].senderUsername == username ? | |
|                                         Alignment.topRight : | |
|                                         Alignment.topLeft | |
|                                     ), | |
|                                     child: Column( | |
|                                         crossAxisAlignment: messages[index].senderUsername == username ? | |
|                                           CrossAxisAlignment.end : | |
|                                           CrossAxisAlignment.start, | |
|                                         children: <Widget>[ | |
|                                           Container( | |
|                                             decoration: BoxDecoration( | |
|                                                 borderRadius: BorderRadius.circular(20), | |
|                                                 color: ( | |
|                                                     messages[index].senderUsername == username ? | |
|                                                     Colors.blue[200] : | |
|                                                     Colors.grey.shade200 | |
|                                                 ), | |
|                                             ), | |
|                                             padding: const EdgeInsets.all(12), | |
|                                             child: Text(messages[index].data, style: const TextStyle(fontSize: 15)), | |
|                                           ), | |
|                                           messages[index].senderUsername != username ? | |
|                                             Text(messages[index].senderUsername) : | |
|                                             const SizedBox.shrink(), | |
|                                           Text( | |
|                                             convertToAgo(messages[index].createdAt), | |
|                                             textAlign: TextAlign.left, | |
|                                             style: TextStyle( | |
|                                                 fontSize: 12, | |
|                                                 color: Colors.grey[500], | |
|                                           ), | |
|                                         ), | |
|                                       ] | |
|                                     ) | |
|                                 ), | |
|                             ); | |
|                           }, | |
|                           ), | |
|                           Align( | |
|                               alignment: Alignment.bottomLeft, | |
|                               child: ConstrainedBox( | |
|                                   constraints: const BoxConstraints( | |
|                                       maxHeight: 200.0, | |
|                                   ), | |
|                                   child: Container( | |
|                                       padding: const EdgeInsets.only(left: 10,bottom: 10,top: 10), | |
|                                       // height: 60, | |
|                                       width: double.infinity, | |
|                                       color: Colors.white, | |
|                                       child: Row( | |
|                                           children: <Widget>[ | |
|                                             GestureDetector( | |
|                                                 onTap: (){ | |
|                                                 }, | |
|                                                 child: Container( | |
|                                                            height: 30, | |
|                                                            width: 30, | |
|                                                            decoration: BoxDecoration( | |
|                                                                color: Colors.lightBlue, | |
|                                                                borderRadius: BorderRadius.circular(30), | |
|                                                            ), | |
|                                                            child: const Icon(Icons.add, color: Colors.white, size: 20, ), | |
|                                                        ), | |
|                                             ), | |
|                                             const SizedBox(width: 15,), | |
|                                             Expanded( | |
|                                                 child: TextField( | |
|                                                     decoration: const InputDecoration( | |
|                                                         hintText: "Write message...", | |
|                                                         hintStyle: TextStyle(color: Colors.black54), | |
|                                                         border: InputBorder.none, | |
|                                                     ), | |
|                                                     maxLines: null, | |
|                                                     controller: msgController, | |
|                                                 ), | |
|                                             ), | |
|                                             const SizedBox(width: 15), | |
|                                             FloatingActionButton( | |
|                                                 onPressed: () async { | |
|                                                     if (msgController.text == '') { | |
|                                                         return; | |
|                                                     } | |
|                                                     await sendMessage(widget.conversation, msgController.text); | |
|                                                     messages = await getMessagesForThread(widget.conversation); | |
|                                                     setState(() {}); | |
|                                                     msgController.text = ''; | |
|                                                 }, | |
|                                                 child: const Icon(Icons.send,color: Colors.white,size: 18,), | |
|                                                 backgroundColor: Colors.blue, | |
|                                             ), | |
|                                             const SizedBox(width: 10), | |
|                                         ], | |
|                                     ), | |
|                                 ), | |
|                             ), | |
|                       ), | |
|                   ], | |
|             ), | |
|       ); | |
|   } | |
| }
 |