MessagingApp/lib/pages/conversations_page.dart

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),),
    );
  }
}