Envelope/mobile/lib/views/main/conversation_detail.dart

import 'package:flutter/material.dart';
import '/models/conversations.dart';

class ConversationDetail extends StatefulWidget{
    const ConversationDetail({Key? key}) : super(key: key);

    @override
    _ConversationDetailState createState() => _ConversationDetailState();
}

class _ConversationDetailState extends State<ConversationDetail> {
    Conversation conversation = Conversation(
            id: '777',
            friendId: 'abc',
            recentMessageId: '111',
    );

    List<Message> messages = [
        Message(
                id: '444',
                conversationId: '777',
                symmetricKey: '',
                data: 'This is a message',
                messageType: messageTypeSender,
        ),
        Message(
                id: '444',
                conversationId: '777',
                symmetricKey: '',
                data: 'This is a message',
                messageType: messageTypeReceiver,
        ),
        Message(
                id: '444',
                conversationId: '777',
                symmetricKey: '',
                data: 'This is a message',
                messageType: messageTypeSender
        ),
        Message(
                id: '444',
                conversationId: '777',
                symmetricKey: '',
                data: 'This is a message',
                messageType: messageTypeReceiver,
        ),
    ];

  @override
  Widget build(BuildContext context) {
      return Scaffold(
              appBar: AppBar(
                      elevation: 0,
                      automaticallyImplyLeading: false,
                      backgroundColor: Colors.white,
                      flexibleSpace: SafeArea(
                              child: Container(
                                      padding: const EdgeInsets.only(right: 16),
                                      child: Row(
                                              children: <Widget>[
                                                  IconButton(
                                                          onPressed: (){
                                                              Navigator.pop(context);
                                                          },
                                                          icon: const Icon(Icons.arrow_back,color: Colors.black,),
                                                  ),
                                                  const SizedBox(width: 2,),
                                                  Expanded(
                                                          child: Column(
                                                                  crossAxisAlignment: CrossAxisAlignment.start,
                                                                  mainAxisAlignment: MainAxisAlignment.center,
                                                                  children: const <Widget>[
                                                                      Text("Kriss Benwat",style: TextStyle( fontSize: 16 ,fontWeight: FontWeight.w600),),
                                                                  ],
                                                          ),
                                                  ),
                                                  const Icon(Icons.settings,color: Colors.black54,),
                                            ],
                                      ),
                                ),
                      ),
            ),
            body: Stack(
                children: <Widget>[
                    ListView.builder(
                            itemCount: messages.length,
                            shrinkWrap: true,
                            padding: const EdgeInsets.only(top: 10,bottom: 10),
                            physics: const NeverScrollableScrollPhysics(),
                            itemBuilder: (context, index) {
                                return Container(
                                        padding: const EdgeInsets.only(left: 14,right: 14,top: 10,bottom: 10),
                                        child: Align(
                                                alignment: (messages[index].messageType == messageTypeReceiver ? Alignment.topLeft:Alignment.topRight),
                                                child: Container(
                                                        decoration: BoxDecoration(
                                                                borderRadius: BorderRadius.circular(20),
                                                                color: (messages[index].messageType == messageTypeReceiver ? Colors.grey.shade200:Colors.blue[200]),
                                                        ),
                                                        padding: const EdgeInsets.all(16),
                                                        child: Text(messages[index].data, style: const TextStyle(fontSize: 15)),
                                                ),
                                        ),
                                );
                            },
                        ),
                        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: Colors.white,
                                child: Row(
                                        children: <Widget>[
                                            GestureDetector(
                                                    onTap: (){
                                                    },
                                                    child: Container(
                                                                   height: 30,
                                                                   width: 30,
                                                                   decoration: BoxDecoration(
                                                                           color: Colors.lightBlue,
                                                                           borderRadius: BorderRadius.circular(30),
                                                                   ),
                                                                   child: const Icon(Icons.add, color: Colors.white, size: 20, ),
                                                           ),
                                            ),
                                            const SizedBox(width: 15,),
                                            const Expanded(
                                                    child: TextField(
                                                            decoration: InputDecoration(
                                                                    hintText: "Write message...",
                                                                    hintStyle: TextStyle(color: Colors.black54),
                                                                    border: InputBorder.none,
                                                            ),
                                                            maxLines: null,
                                                    ),
                                            ),
                                            const SizedBox(width: 15,),
                                            FloatingActionButton(
                                                    onPressed: () {
                                                    },
                                                    child: const Icon(Icons.send,color: Colors.white,size: 18,),
                                                    backgroundColor: Colors.blue,
                                                    elevation: 0,
                                            ),
                                        ],

                                ),
                            ),
                    ),
                    ),
                ],
            ),
        );
  }
}