Generated code from Pixels2Flutter

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Chat UI',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {},
        ),
        title: Row(
          children: [
            CircleAvatar(
              backgroundImage: NetworkImage(
                'https://corsproxy.io/?https://oaidalleapiprodscus.blob.core.windows.net/private/org-dtDDtkEGoFccn5xaP5W1p3Rr/user-3XZA7QXb1LF8ADMIxEZC0Qp4/img-Ulre9sm0YGjpgv56UNfU49dE.png?st=2023-11-29T21%3A02%3A32Z&se=2023-11-29T23%3A02%3A32Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-11-29T19%3A07%3A52Z&ske=2023-11-30T19%3A07%3A52Z&sks=b&skv=2021-08-06&sig=6odoJV69Y4RGYQhz%2BELozi7%2BKCuD8Q4JZMuCtszbjs0%3D',
              ),
            ),
            SizedBox(width: 10),
            Text('Tyler Benil'),
          ],
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.videocam),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.call),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {},
          ),
        ],
      ),
      body: ChatBody(),
      bottomNavigationBar: ChatInputField(),
    );
  }
}

class ChatBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ChatMessage(
          text: "I'm in a meeting at the moment.\nWon't take more than 20 min.",
          messageType: MessageType.Receiver,
          messageStatus: MessageStatus.Viewed,
          time: "11:45",
        ),
        ChatMessage(
          text: "I’ll Wait near the Skyler coffee shop",
          messageType: MessageType.Sender,
          messageStatus: MessageStatus.Viewed,
          time: "11:50",
        ),
        ChatMessage(
          text: "Try their hazelnut Mocha. It's the best.",
          messageType: MessageType.Receiver,
          messageStatus: MessageStatus.Viewed,
          time: "12:00",
        ),
        ChatMessage(
          text: "It's 12:20. I’m leaving.",
          messageType: MessageType.Sender,
          messageStatus: MessageStatus.Viewed,
          time: "12:20",
        ),
        ChatMessage(
          text: "Rachel gave me some paperwork.\nGive me 5 more minutes. Please.",
          messageType: MessageType.Receiver,
          messageStatus: MessageStatus.Viewed,
          time: "12:25",
        ),
        ChatMessage(
          text: "You deleted this message.",
          messageType: MessageType.Sender,
          messageStatus: MessageStatus.Not_Viewed,
          time: "12:28",
        ),
        ChatMessage(
          text: "Hey, I’m here. where are you?",
          messageType: MessageType.Receiver,
          messageStatus: MessageStatus.Viewed,
          time: "12:25",
        ),
        ChatMessage(
          text: "I’m near the piano wearing red.",
          messageType: MessageType.Sender,
          messageStatus: MessageStatus.Viewed,
          time: "12:30",
        ),
      ],
    );
  }
}

class ChatInputField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      color: Colors.white,
      child: SafeArea(
        child: Row(
          children: [
            Icon(Icons.mic, color: Colors.blue),
            SizedBox(width: 10),
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20),
                decoration: BoxDecoration(
                  color: Colors.blue.shade100,
                  borderRadius: BorderRadius.circular(35),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Type message",
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    Icon(Icons.sentiment_satisfied_alt_outlined, color: Colors.blue),
                  ],
                ),
              ),
            ),
            SizedBox(width: 10),
            Icon(Icons.send, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

enum MessageType { Sender, Receiver }
enum MessageStatus { Viewed, Not_Viewed }

class ChatMessage extends StatelessWidget {
  final String text;
  final MessageType messageType;
  final MessageStatus messageStatus;
  final String time;

  const ChatMessage({
    required this.text,
    required this.messageType,
    required this.messageStatus,
    required this.time,
  });

  @override
  Widget build(BuildContext context) {
    bool isSender = messageType == MessageType.Sender;
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      child: Align(
        alignment: isSender ? Alignment.centerRight : Alignment.centerLeft,
        child: Column(
          crossAxisAlignment:
              isSender ? CrossAxisAlignment.end : CrossAxisAlignment.start,
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
              decoration: BoxDecoration(
                color: isSender ? Colors.blue.shade100 : Colors.grey.shade200,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Text(text),
            ),
            SizedBox(height: 5),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  time,
                  style: TextStyle(fontSize: 12, color: Colors.grey),
                ),
                if (isSender) ...[
                  SizedBox(width: 5),
                  Icon(
                    messageStatus == MessageStatus.Viewed
                        ? Icons.done_all
                        : Icons.done,
                    size: 20,
                    color: messageStatus == MessageStatus.Viewed
                        ? Colors.blue
                        : Colors.grey,
                  ),
                ],
              ],
            ),
          ],
        ),
      ),
    );
  }
}