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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-dtDDtkEGoFccn5xaP5W1p3Rr%2Fuser-3XZA7QXb1LF8ADMIxEZC0Qp4%2Fimg-ogi5aZzBCm5Fa9RWuOAo8APD.png%3Fst%3D2023-11-29T21%253A23%253A17Z%26se%3D2023-11-29T23%253A23%253A17Z%26sp%3Dr%26sv%3D2021-08-06%26sr%3Db%26rscd%3Dinline%26rsct%3Dimage%2Fpng%26skoid%3D6aaadede-4fb3-4698-a8f6-684d7786b067%26sktid%3Da48cca56-e6da-484e-a814-9c849652bcb3%26skt%3D2023-11-29T19%253A08%253A03Z%26ske%3D2023-11-30T19%253A08%253A03Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DVwbi0WdYrvXw3uxtePM2L2d0P7sVzi7p1zM3OU%252BBQCQ%253D',
              ),
            ),
            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(
      padding: EdgeInsets.all(16),
      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.NotViewed,
          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.NotViewed,
          time: "12:25",
        ),
        ChatMessage(
          text: "You deleted this message.",
          messageType: MessageType.Sender,
          messageStatus: MessageStatus.NotViewed,
          time: "12:28",
        ),
        ChatMessage(
          text: "Hey, I’m here. where are you?",
          messageType: MessageType.Receiver,
          messageStatus: MessageStatus.NotViewed,
          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: 16, vertical: 10),
      color: Colors.white,
      child: SafeArea(
        child: Row(
          children: [
            Icon(Icons.mic, color: Colors.blue),
            SizedBox(width: 16),
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 14),
                decoration: BoxDecoration(
                  color: Colors.blue.shade100,
                  borderRadius: BorderRadius.circular(36),
                ),
                child: Row(
                  children: [
                    Icon(Icons.sentiment_satisfied_alt_outlined, color: Colors.blue),
                    SizedBox(width: 8),
                    Expanded(
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: "Type message",
                          border: InputBorder.none,
                        ),
                      ),
                    ),
                    Icon(Icons.attach_file, color: Colors.blue),
                    SizedBox(width: 8),
                    Icon(Icons.camera_alt, color: Colors.blue),
                  ],
                ),
              ),
            ),
            SizedBox(width: 16),
            Icon(Icons.send, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

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

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 Align(
      alignment: isSender ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        margin: EdgeInsets.symmetric(vertical: 4),
        decoration: BoxDecoration(
          color: isSender ? Colors.blue.shade100 : Colors.grey.shade200,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(
              text,
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 5),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  time,
                  style: TextStyle(fontSize: 12, color: Colors.grey),
                ),
                SizedBox(width: 5),
                if (isSender)
                  Icon(
                    messageStatus == MessageStatus.Viewed
                        ? Icons.done_all
                        : Icons.done,
                    size: 20,
                    color: messageStatus == MessageStatus.Viewed
                        ? Colors.blue
                        : Colors.grey,
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}