import 'package:flutter/material.dart'; import '/models/conversations.dart'; import '/models/messages.dart'; import '/models/my_profile.dart'; import '/utils/storage/messages.dart'; import '/utils/time.dart'; import '/views/main/conversation/settings.dart'; 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 { List messages = []; MyProfile profile = MyProfile(id: '', username: ''); TextEditingController msgController = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( elevation: 0, automaticallyImplyLeading: false, flexibleSpace: SafeArea( child: Container( padding: const EdgeInsets.only(right: 16), child: Row( children: [ IconButton( onPressed: (){ Navigator.pop(context); }, icon: Icon( Icons.arrow_back, color: Theme.of(context).appBarTheme.iconTheme?.color, ), ), const SizedBox(width: 2,), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( widget.conversation.name, style: TextStyle( fontSize: 16, fontWeight: FontWeight.w600, color: Theme.of(context).appBarTheme.toolbarTextStyle?.color ), ), ], ), ), IconButton( onPressed: (){ Navigator.of(context).push( MaterialPageRoute(builder: (context) => ConversationSettings(conversation: widget.conversation)), ); }, icon: Icon( Icons.settings, color: Theme.of(context).appBarTheme.iconTheme?.color, ), ), ], ), ), ), ), body: Stack( children: [ messagesView(), 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: Theme.of(context).backgroundColor, child: Row( children: [ GestureDetector( onTap: (){ }, child: Container( height: 30, width: 30, decoration: BoxDecoration( color: Theme.of(context).primaryColor, borderRadius: BorderRadius.circular(30), ), child: Icon( Icons.add, color: Theme.of(context).colorScheme.onPrimary, size: 20 ), ), ), const SizedBox(width: 15,), Expanded( child: TextField( decoration: InputDecoration( hintText: "Write message...", hintStyle: TextStyle( color: Theme.of(context).hintColor, ), border: InputBorder.none, ), maxLines: null, controller: msgController, ), ), const SizedBox(width: 15), Container( width: 45, height: 45, child: FittedBox( child: FloatingActionButton( onPressed: () async { if (msgController.text == '') { return; } await sendMessage(widget.conversation, msgController.text); messages = await getMessagesForThread(widget.conversation); setState(() {}); msgController.text = ''; }, child: Icon( Icons.send, color: Theme.of(context).colorScheme.onPrimary, size: 22 ), backgroundColor: Theme.of(context).primaryColor, ), ), ), const SizedBox(width: 10), ], ), ), ), ), ], ), ); } Future fetchMessages() async { profile = await MyProfile.getProfile(); messages = await getMessagesForThread(widget.conversation); setState(() {}); } @override void initState() { super.initState(); fetchMessages(); } Widget usernameOrFailedToSend(int index) { if (messages[index].senderUsername != profile.username) { return Text( messages[index].senderUsername, style: TextStyle( fontSize: 12, color: Colors.grey[300], ), ); } if (messages[index].failedToSend) { return Row( mainAxisAlignment: MainAxisAlignment.end, children: const [ Icon( Icons.warning_rounded, color: Colors.red, size: 20, ), Text( 'Failed to send', style: TextStyle(color: Colors.red, fontSize: 12), textAlign: TextAlign.right, ), ], ); } return const SizedBox.shrink(); } Widget messagesView() { if (messages.isEmpty) { return const Center( child: Text('No Messages'), ); } return 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 == profile.username ? Alignment.topRight : Alignment.topLeft ), child: Column( crossAxisAlignment: messages[index].senderUsername == profile.username ? CrossAxisAlignment.end : CrossAxisAlignment.start, children: [ Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: ( messages[index].senderUsername == profile.username ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.tertiary ), ), padding: const EdgeInsets.all(12), child: Text( messages[index].data, style: TextStyle( fontSize: 15, color: messages[index].senderUsername == profile.username ? Theme.of(context).colorScheme.onPrimary : Theme.of(context).colorScheme.onTertiary, ) ), ), const SizedBox(height: 1.5), Row( mainAxisAlignment: messages[index].senderUsername == profile.username ? MainAxisAlignment.end : MainAxisAlignment.start, children: [ const SizedBox(width: 10), usernameOrFailedToSend(index), ], ), const SizedBox(height: 1.5), Row( mainAxisAlignment: messages[index].senderUsername == profile.username ? MainAxisAlignment.end : MainAxisAlignment.start, children: [ const SizedBox(width: 10), Text( convertToAgo(messages[index].createdAt), textAlign: messages[index].senderUsername == profile.username ? TextAlign.left : TextAlign.right, style: TextStyle( fontSize: 12, color: Colors.grey[500], ), ), ], ), index != 0 ? const SizedBox(height: 20) : const SizedBox.shrink(), ], ) ), ); }, ); } }