Recent Conversations Page, Conversations Page implemented'

2025-02-16 18:37:42 +00:00
parent 7e33872886
commit 1a74d16d85
17 changed files with 707 additions and 150 deletions
@@ -0,0 +1,234 @@
+import 'package:flutter/material.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:provider/provider.dart';
+import 'package:timeago/timeago.dart' as timeago;
+
+class ConversationsPage extends StatefulWidget {
+  ConversationsPage({
+    super.key,
+    required this.conversationId,
+    // required this.receiverId,
+    required this.chatImage,
+    required this.chatName,
+  });
+
+  String conversationId;
+  // String receiverId;
+  String chatName;
+  String chatImage;
+
+  @override
+  State<StatefulWidget> createState() {
+    return _ConversationsPageState();
+  }
+}
+
+class _ConversationsPageState extends State<ConversationsPage> {
+  //
+
+  late double _deviceHeight;
+  late double _deviceWidth;
+  late MessagingProviders _auth;
+
+  @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);
+      return Stack(
+        clipBehavior: Clip.none,
+        children: [
+          _messageListView(),
+          _messageInputField(_context),
+        ],
+      );
+    });
+  }
+
+  Widget _messageListView() {
+    return Container(
+      height: _deviceHeight * 0.75,
+      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("");
+          }),
+    );
+  }
+
+  Widget _messageView(Messages _message) {
+    bool _isOwnMessage = false;
+    if (_message.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: [
+          _isOwnMessage ? Container() : _imageViewBubble(),
+          _textMessageBubble(_isOwnMessage, _message),
+        ],
+      ),
+    );
+  }
+
+  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.75,
+      padding: EdgeInsets.symmetric(horizontal: 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: [
+          Text(_message.message),
+          Text(
+            timeago.format(_message.timeStamp),
+            style: TextStyle(
+              color: Colors.white70,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  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: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          _messageText(),
+          _imageUpload(),
+          _sendMessage(_context),
+        ],
+      ),
+    );
+  }
+
+  Widget _messageText() {
+    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(
+        validator: (_input) {
+          if (_input == null) {
+            return "";
+          }
+        },
+        onChanged: (_input) {
+          //
+        },
+        onSaved: (_input) {
+          //
+        },
+        cursorColor: Colors.white,
+        decoration: InputDecoration(
+          border: InputBorder.none,
+          hintText: "type a message",
+        ),
+        autocorrect: false,
+      ),
+    );
+  }
+
+  Widget _sendMessage(BuildContext context) {
+    return Container(
+      height: _deviceHeight * 0.045,
+      width: _deviceHeight * 0.045,
+      child: IconButton(
+        onPressed: () {},
+        icon: Icon(
+          Icons.send,
+          color: Colors.white,
+        ),
+      ),
+    );
+  }
+
+  Widget _imageUpload() {
+    return SizedBox(
+      height: _deviceHeight * 0.045,
+      width: _deviceHeight * 0.045,
+      child: FloatingActionButton(onPressed: () {},
+      backgroundColor: Colors.blue,
+      child: Icon(Icons.camera_enhance),),
+    );
+  }
+}