425 lines
12 KiB
Dart
425 lines
12 KiB
Dart
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;
|
|
|
|
// ignore: must_be_immutable
|
|
class ConversationsPage extends StatefulWidget {
|
|
ConversationsPage({
|
|
super.key,
|
|
required this.chatId,
|
|
// required this.receiverId,
|
|
required this.chatImage,
|
|
required this.chatName,
|
|
});
|
|
|
|
String chatId;
|
|
// String receiverId;
|
|
String chatName;
|
|
String chatImage;
|
|
|
|
@override
|
|
State<StatefulWidget> createState() {
|
|
return _ConversationsPageState();
|
|
}
|
|
}
|
|
|
|
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) {
|
|
//
|
|
_deviceHeight = MediaQuery.of(context).size.height;
|
|
_deviceWidth = MediaQuery.of(context).size.width;
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
|
title: Text(widget.chatName),
|
|
titleTextStyle: TextStyle(fontSize: 16),
|
|
),
|
|
body: ChangeNotifierProvider<MessagingProviders>.value(
|
|
value: MessagingProviders.instance,
|
|
child: _conversationPageUI(),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _conversationPageUI() {
|
|
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.80,
|
|
width: _deviceWidth,
|
|
child: StreamBuilder<Chats>(
|
|
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(List<Messages> _messages, int _index) {
|
|
bool _isOwnMessage = false;
|
|
if (_messages[_index].senderId == _auth.user!.$id) {
|
|
_isOwnMessage = true;
|
|
}
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
mainAxisAlignment:
|
|
_isOwnMessage ? MainAxisAlignment.end : MainAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
deleteButton(_isOwnMessage, _messages, _index),
|
|
_isOwnMessage ? Container() : _imageViewBubble(),
|
|
SizedBox(
|
|
width: _deviceWidth * 0.01,
|
|
),
|
|
_messages[_index].type == "text"
|
|
? _textMessageBubble(_isOwnMessage, _messages[_index])
|
|
: _imageMessageBubble(_isOwnMessage, _messages[_index]),
|
|
deleteButton(!_isOwnMessage, _messages, _index),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _textMessageBubble(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.60,
|
|
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
|
|
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: [
|
|
Text(_message.message),
|
|
SizedBox(
|
|
height: 10,
|
|
),
|
|
Text(
|
|
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),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _imageViewBubble() {
|
|
return Container(
|
|
height: _deviceHeight * 0.05,
|
|
width: _deviceHeight * 0.05,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(500),
|
|
image: DecorationImage(
|
|
fit: BoxFit.cover,
|
|
image: NetworkImage(
|
|
widget.chatImage,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _messageInputField(BuildContext _context) {
|
|
return Align(
|
|
alignment: Alignment.bottomCenter,
|
|
child: Form(
|
|
key: _formKey,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
_messageInput(),
|
|
_sendImage(),
|
|
_sendText(_context),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _messageInput() {
|
|
return Container(
|
|
padding: EdgeInsets.only(left: 10, right: 10),
|
|
decoration: BoxDecoration(
|
|
color: Color.fromRGBO(43, 43, 43, 1),
|
|
borderRadius: BorderRadius.circular(30)),
|
|
margin: EdgeInsets.symmetric(
|
|
horizontal: _deviceWidth * 0.04,
|
|
vertical: _deviceHeight * 0.02,
|
|
),
|
|
width: _deviceWidth * 0.70,
|
|
child: TextFormField(
|
|
maxLines: null,
|
|
validator: (_input) {
|
|
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(
|
|
border: InputBorder.none,
|
|
hintText: "type a message",
|
|
),
|
|
autocorrect: false,
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _sendText(BuildContext _context) {
|
|
return Container(
|
|
height: _deviceHeight * 0.045,
|
|
width: _deviceHeight * 0.045,
|
|
child: IconButton(
|
|
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,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _sendImage() {
|
|
return SizedBox(
|
|
height: _deviceHeight * 0.045,
|
|
width: _deviceHeight * 0.045,
|
|
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},
|
|
);
|
|
}
|
|
}
|