agboola/MessagingApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Messaging

Browse Source 
Implemented Chat Screens, Profile Pages, Search Pages
WIP: User profile, new chat button
Intended: Groups, Calls, Voice Messages
Properly deleting chats, offline storage of messages
This commit is contained in:
onasanya.lanre
2025-03-26 13:41:56 +00:00
parent 1a74d16d85
commit 1ba9e981e1
18 changed files with 812 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pages/conversations_page.dart
+251 -62
View File
@@ -1,20 +1,26 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:image_picker/image_picker.dart';
import 'package:messaging_app/components/messaging_provider.dart';
import 'package:messaging_app/models/chats.dart';
import 'package:messaging_app/models/messages.dart';
import 'package:messaging_app/service/media_service.dart';
import 'package:messaging_app/service/snackbar_service.dart';
import 'package:provider/provider.dart';
import 'package:timeago/timeago.dart' as timeago;
class ConversationsPage extends StatefulWidget {
ConversationsPage({
super.key,
required this.conversationId,
required this.chatId,
// required this.receiverId,
required this.chatImage,
required this.chatName,
});
String conversationId;
String chatId;
// String receiverId;
String chatName;
String chatImage;
@@ -30,7 +36,24 @@ class _ConversationsPageState extends State<ConversationsPage> {
late double _deviceHeight;
late double _deviceWidth;
final ScrollController _scrollController;
final GlobalKey<FormState> _formKey;
late MessagingProviders _auth;
List<List<Messages>> _messagesArray;
List<Messages> _messages;
List<String> _members;
int _memberPosition;
String _messageText;
_ConversationsPageState()
: _messageText = '',
_formKey = GlobalKey<FormState>(),
_scrollController = ScrollController(),
_messagesArray = [],
_messages = [],
_members = [],
_memberPosition = 0;
@override
Widget build(BuildContext context) {
@@ -52,45 +75,71 @@ class _ConversationsPageState extends State<ConversationsPage> {
}
Widget _conversationPageUI() {
return Builder(builder: (_context) {
_auth = Provider.of<MessagingProviders>(_context);
return Stack(
clipBehavior: Clip.none,
children: [
_messageListView(),
_messageInputField(_context),
],
);
});
return Builder(
builder: (_context) {
_auth = Provider.of<MessagingProviders>(_context);
SnackBarService.instance.buildContext = _context;
return Stack(
clipBehavior: Clip.none,
children: [
_messageListView(),
_messageInputField(_context),
],
);
},
);
}
Widget _messageListView() {
return Container(
height: _deviceHeight * 0.75,
height: _deviceHeight * 0.80,
width: _deviceWidth,
child: StreamBuilder<Chats>(
stream: MessagingProviders.instance.getChat(widget.conversationId),
builder: (_context, _snapshot) {
return _snapshot.hasData
? ListView.builder(
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
itemCount: _snapshot.data!.messages!.length,
itemBuilder: (BuildContext _context, int _index) {
var _message = _snapshot.data!.messages![_index];
return _messageView(_message);
},
)
: Text("");
}),
stream: MessagingProviders.instance.getMessage(widget.chatId),
builder: (_context, _snapshot) {
if (_snapshot.hasData) {
_members = _snapshot.data!.members;
_memberPosition = _members.indexOf(_auth.user!.$id);
_messages = _snapshot.data!.messages![_memberPosition];
_messagesArray = _snapshot.data!.messages!;
}
if (_snapshot.hasData) {
if (_messages.isEmpty) {
return Align(
child: Text("No Chat"),
);
} else {
return ListView.builder(
controller: _scrollController,
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
itemCount: _messages.length,
itemBuilder: (BuildContext _context, int _index) {
_messages[_index];
return _messageView(_messages, _index);
},
);
}
} else if (_snapshot.hasError) {
return Align(
child: Text("No Chat"),
);
} else {
return SpinKitWanderingCubes(
color: Colors.blue,
size: 50.0,
);
}
},
),
);
}
Widget _messageView(Messages _message) {
Widget _messageView(List<Messages> _messages, int _index) {
bool _isOwnMessage = false;
if (_message.senderId == _auth.user!.$id) {
if (_messages[_index].senderId == _auth.user!.$id) {
_isOwnMessage = true;
}
@@ -102,8 +151,15 @@ class _ConversationsPageState extends State<ConversationsPage> {
_isOwnMessage ? MainAxisAlignment.end : MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
deleteButton(_isOwnMessage, _messages, _index),
_isOwnMessage ? Container() : _imageViewBubble(),
_textMessageBubble(_isOwnMessage, _message),
SizedBox(
width: _deviceWidth * 0.01,
),
_messages[_index].type == "text"
? _textMessageBubble(_isOwnMessage, _messages[_index])
: _imageMessageBubble(_isOwnMessage, _messages[_index]),
deleteButton(!_isOwnMessage, _messages, _index),
],
),
);
@@ -114,9 +170,9 @@ class _ConversationsPageState extends State<ConversationsPage> {
? [Colors.blue, Color.fromRGBO(42, 117, 188, 1)]
: [Color.fromRGBO(49, 69, 69, 1), Color.fromRGBO(43, 43, 43, 1)];
return Container(
height: _deviceHeight * 0.10,
width: _deviceWidth * 0.75,
padding: EdgeInsets.symmetric(horizontal: 10),
// height: _deviceHeight * 0.10,
width: _deviceWidth * 0.60,
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
@@ -131,12 +187,57 @@ class _ConversationsPageState extends State<ConversationsPage> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(_message.message),
SizedBox(
height: 10,
),
Text(
timeago.format(_message.timeStamp),
style: TextStyle(
color: Colors.white70,
timeago.format(DateTime.parse(_message.timeStamp)),
style: TextStyle(color: Colors.white70, fontSize: 10),
),
],
),
);
}
Widget _imageMessageBubble(bool _isOwnMessage, Messages _message) {
List<Color> _colorScheme = _isOwnMessage
? [Colors.blue, Color.fromRGBO(42, 117, 188, 1)]
: [Color.fromRGBO(49, 69, 69, 1), Color.fromRGBO(43, 43, 43, 1)];
return Container(
// height: _deviceHeight * 0.10,
// width: _deviceWidth * 0.75,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
colors: _colorScheme,
stops: [0.25, 0.85],
begin: Alignment.bottomLeft,
end: Alignment.bottomRight),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: _deviceHeight * 0.30,
width: _deviceWidth * 0.40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(_message.message),
fit: BoxFit.cover,
),
),
),
SizedBox(
height: 10,
),
Text(
timeago.format(DateTime.parse(_message.timeStamp)),
style: TextStyle(color: Colors.white70, fontSize: 10),
),
],
),
);
@@ -161,42 +262,49 @@ class _ConversationsPageState extends State<ConversationsPage> {
Widget _messageInputField(BuildContext _context) {
return Align(
alignment: Alignment.bottomCenter,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: [
_messageText(),
_imageUpload(),
_sendMessage(_context),
],
child: Form(
key: _formKey,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
_messageInput(),
_sendImage(),
_sendText(_context),
],
),
),
);
}
Widget _messageText() {
Widget _messageInput() {
return Container(
padding: EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Color.fromRGBO(43, 43, 43, 1),
borderRadius: BorderRadius.circular(30)
),
color: Color.fromRGBO(43, 43, 43, 1),
borderRadius: BorderRadius.circular(30)),
margin: EdgeInsets.symmetric(
horizontal: _deviceWidth * 0.04,
vertical: _deviceHeight * 0.02
vertical: _deviceHeight * 0.02,
),
width: _deviceWidth * 0.70,
child: TextFormField(
maxLines: null,
validator: (_input) {
if (_input == null) {
return "";
if (_input!.isEmpty) {
SnackBarService.instance
.showSnackBarError("please enter a message");
}
return null;
},
onChanged: (_input) {
//
_formKey.currentState?.save();
},
onSaved: (_input) {
//
setState(() {
_messageText = _input!;
});
},
cursorColor: Colors.white,
decoration: InputDecoration(
@@ -208,12 +316,22 @@ class _ConversationsPageState extends State<ConversationsPage> {
);
}
Widget _sendMessage(BuildContext context) {
Widget _sendText(BuildContext _context) {
return Container(
height: _deviceHeight * 0.045,
width: _deviceHeight * 0.045,
child: IconButton(
onPressed: () {},
onPressed: () async {
if (_formKey.currentState!.validate()) {
if (_messageText.isNotEmpty) {
//
await sendMessage('text', _messageText);
_formKey.currentState?.reset();
FocusScope.of(_context).unfocus();
}
}
},
icon: Icon(
Icons.send,
color: Colors.white,
@@ -222,13 +340,84 @@ class _ConversationsPageState extends State<ConversationsPage> {
);
}
Widget _imageUpload() {
Widget _sendImage() {
return SizedBox(
height: _deviceHeight * 0.045,
width: _deviceHeight * 0.045,
child: FloatingActionButton(onPressed: () {},
backgroundColor: Colors.blue,
child: Icon(Icons.camera_enhance),),
child: FloatingActionButton(
onPressed: () async {
XFile? _imageFile = await MediaService.instance.getImageFromLibrary();
if (_imageFile != null) {
var _url = await MessagingProviders.instance
.uploadUserImage(_imageFile, '_uid');
await sendMessage('image', _url);
}
},
backgroundColor: Colors.blue,
child: Icon(
Icons.camera_enhance,
),
),
);
}
Widget deleteButton(
bool _isOwnMessage, List<Messages> _messages, int _index) {
return !_isOwnMessage
? SizedBox()
: Row(
children: [
IconButton(
icon: const Icon(
Icons.delete,
size: 15,
),
onPressed: () async {
List outMessages = [];
_messages.removeAt(_index);
_messagesArray[_memberPosition] = _messages;
for (var i = 0; i < _messagesArray.length; i++) {
outMessages.add(
json.encode(
{_members[i]: _messagesArray[i]},
),
);
}
await _auth.sendMessage(
widget.chatId,
{"messages": outMessages},
);
},
),
],
);
}
Future<void> sendMessage(var type, var _message) async {
List outMessages = [];
for (var i = 0; i < _members.length; i++) {
_messagesArray[i].add(
Messages(
message: _message,
senderId: _auth.user!.$id,
type: type,
timeStamp: DateTime.now().toUtc().toString(),
),
);
outMessages.add(
json.encode(
{_members[i]: _messagesArray[i]},
),
);
}
await _auth.sendMessage(
widget.chatId,
{"messages": outMessages},
);
}
}