174 lines
		
	
	
		
			7.1 KiB
		
	
	
	
		
			Dart
		
	
	
	
	
	
			
		
		
	
	
			174 lines
		
	
	
		
			7.1 KiB
		
	
	
	
		
			Dart
		
	
	
	
	
	
| import 'package:dash_chat_2/dash_chat_2.dart';
 | |
| import 'package:flutter/material.dart';
 | |
| import 'package:flutter_hbb/common.dart';
 | |
| import 'package:flutter_hbb/models/chat_model.dart';
 | |
| import 'package:get/get.dart';
 | |
| import 'package:provider/provider.dart';
 | |
| 
 | |
| import '../../mobile/pages/home_page.dart';
 | |
| 
 | |
| class ChatPage extends StatelessWidget implements PageShape {
 | |
|   late final ChatModel chatModel;
 | |
| 
 | |
|   ChatPage({ChatModel? chatModel}) {
 | |
|     this.chatModel = chatModel ?? gFFI.chatModel;
 | |
|   }
 | |
| 
 | |
|   @override
 | |
|   final title = translate("Chat");
 | |
| 
 | |
|   @override
 | |
|   final icon = Icon(Icons.chat);
 | |
| 
 | |
|   @override
 | |
|   final appBarActions = [
 | |
|     PopupMenuButton<int>(
 | |
|         icon: Icon(Icons.group),
 | |
|         itemBuilder: (context) {
 | |
|           // only mobile need [appBarActions], just bind gFFI.chatModel
 | |
|           final chatModel = gFFI.chatModel;
 | |
|           return chatModel.messages.entries.map((entry) {
 | |
|             final id = entry.key;
 | |
|             final user = entry.value.chatUser;
 | |
|             return PopupMenuItem<int>(
 | |
|               child: Text("${user.firstName}   ${user.id}"),
 | |
|               value: id,
 | |
|             );
 | |
|           }).toList();
 | |
|         },
 | |
|         onSelected: (id) {
 | |
|           gFFI.chatModel.changeCurrentID(id);
 | |
|         })
 | |
|   ];
 | |
| 
 | |
|   @override
 | |
|   Widget build(BuildContext context) {
 | |
|     return ChangeNotifierProvider.value(
 | |
|       value: chatModel,
 | |
|       child: Container(
 | |
|         color: Theme.of(context).scaffoldBackgroundColor,
 | |
|         padding: EdgeInsets.all(14.0),
 | |
|         child: Consumer<ChatModel>(
 | |
|           builder: (context, chatModel, child) {
 | |
|             final currentUser = chatModel.currentUser;
 | |
|             return Container(
 | |
|               padding: EdgeInsets.symmetric(vertical: 5.0),
 | |
|               decoration: BoxDecoration(
 | |
|                 borderRadius: BorderRadius.circular(10.0),
 | |
|                 color: Theme.of(context).colorScheme.background,
 | |
|               ),
 | |
|               child: Stack(
 | |
|                 children: [
 | |
|                   LayoutBuilder(builder: (context, constraints) {
 | |
|                     final chat = DashChat(
 | |
|                       onSend: (chatMsg) {
 | |
|                         chatModel.send(chatMsg);
 | |
|                         chatModel.inputNode.requestFocus();
 | |
|                       },
 | |
|                       currentUser: chatModel.me,
 | |
|                       messages: chatModel
 | |
|                               .messages[chatModel.currentID]?.chatMessages ??
 | |
|                           [],
 | |
|                       inputOptions: InputOptions(
 | |
|                         sendOnEnter: true,
 | |
|                         focusNode: chatModel.inputNode,
 | |
|                         inputTextStyle: TextStyle(
 | |
|                             fontSize: 14,
 | |
|                             color:
 | |
|                                 Theme.of(context).textTheme.titleLarge?.color),
 | |
|                         inputDecoration: isDesktop
 | |
|                             ? InputDecoration(
 | |
|                                 isDense: true,
 | |
|                                 hintText: translate('Write a message'),
 | |
|                                 filled: true,
 | |
|                                 fillColor:
 | |
|                                     Theme.of(context).colorScheme.background,
 | |
|                                 contentPadding: EdgeInsets.all(10),
 | |
|                                 border: OutlineInputBorder(
 | |
|                                   borderRadius: BorderRadius.circular(10.0),
 | |
|                                   borderSide: const BorderSide(
 | |
|                                     width: 1,
 | |
|                                     style: BorderStyle.solid,
 | |
|                                   ),
 | |
|                                 ),
 | |
|                               )
 | |
|                             : defaultInputDecoration(
 | |
|                                 hintText: translate('Write a message'),
 | |
|                                 fillColor:
 | |
|                                     Theme.of(context).colorScheme.background,
 | |
|                               ),
 | |
|                         sendButtonBuilder: defaultSendButton(
 | |
|                           padding:
 | |
|                               EdgeInsets.symmetric(horizontal: 6, vertical: 0),
 | |
|                           color: MyTheme.accent,
 | |
|                           icon: Icons.send_rounded,
 | |
|                         ),
 | |
|                       ),
 | |
|                       messageOptions: MessageOptions(
 | |
|                         showOtherUsersAvatar: false,
 | |
|                         showOtherUsersName: false,
 | |
|                         textColor: Colors.white,
 | |
|                         maxWidth: constraints.maxWidth * 0.7,
 | |
|                         messageTextBuilder: (message, _, __) {
 | |
|                           final isOwnMessage = message.user.id.isBlank!;
 | |
|                           return Column(
 | |
|                             crossAxisAlignment: isOwnMessage
 | |
|                                 ? CrossAxisAlignment.end
 | |
|                                 : CrossAxisAlignment.start,
 | |
|                             children: <Widget>[
 | |
|                               Text(message.text,
 | |
|                                   style: TextStyle(color: Colors.white)),
 | |
|                               Text(
 | |
|                                 "${message.createdAt.hour}:${message.createdAt.minute.toString().padLeft(2, '0')}",
 | |
|                                 style: TextStyle(
 | |
|                                   color: Colors.white,
 | |
|                                   fontSize: 8,
 | |
|                                 ),
 | |
|                               ).marginOnly(top: 3),
 | |
|                             ],
 | |
|                           );
 | |
|                         },
 | |
|                         messageDecorationBuilder:
 | |
|                             (message, previousMessage, nextMessage) {
 | |
|                           final isOwnMessage = message.user.id.isBlank!;
 | |
|                           print("message.user.id = ${message.user.id}\n");
 | |
|                           return defaultMessageDecoration(
 | |
|                             color:
 | |
|                                 isOwnMessage ? MyTheme.accent : Colors.blueGrey,
 | |
|                             borderTopLeft: 8,
 | |
|                             borderTopRight: 8,
 | |
|                             borderBottomRight: isOwnMessage ? 2 : 8,
 | |
|                             borderBottomLeft: isOwnMessage ? 8 : 2,
 | |
|                           );
 | |
|                         },
 | |
|                       ),
 | |
|                     );
 | |
|                     return SelectionArea(child: chat);
 | |
|                   }),
 | |
|                   desktopType == DesktopType.cm ||
 | |
|                           chatModel.currentID == ChatModel.clientModeID
 | |
|                       ? SizedBox.shrink()
 | |
|                       : Padding(
 | |
|                           padding: EdgeInsets.all(12),
 | |
|                           child: Row(
 | |
|                             children: [
 | |
|                               Icon(Icons.account_circle,
 | |
|                                   color: MyTheme.accent80),
 | |
|                               SizedBox(width: 5),
 | |
|                               Text(
 | |
|                                 "${currentUser.firstName}   ${currentUser.id}",
 | |
|                                 style: TextStyle(color: MyTheme.accent),
 | |
|                               ),
 | |
|                             ],
 | |
|                           ),
 | |
|                         ),
 | |
|                 ],
 | |
|               ),
 | |
|             );
 | |
|           },
 | |
|         ),
 | |
|       ),
 | |
|     );
 | |
|   }
 | |
| }
 |