Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        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%3A%2F%2Foaidalleapiprodscus.blob.core.windows.net%2Fprivate%2Forg-dtDDtkEGoFccn5xaP5W1p3Rr%2Fuser-3XZA7QXb1LF8ADMIxEZC0Qp4%2Fimg-l0v9UpnAmy7HySyWwpoRlcA6.png%3Fst%3D2023-12-03T21%253A21%253A44Z%26se%3D2023-12-03T23%253A21%253A44Z%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-12-02T22%253A46%253A19Z%26ske%3D2023-12-03T22%253A46%253A19Z%26sks%3Db%26skv%3D2021-08-06%26sig%3DGoA1pFfoGQvSikmi5sUwSDfJ9sv4srpH%2FXiWvXsTJfA%253D',
              ),
            ),
            SizedBox(width: 8),
            Text('Tyler Benil'),
          ],
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.videocam),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.call),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {},
          ),
        ],
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: ListView(
                padding: EdgeInsets.symmetric(horizontal: 16, vertical: 20),
                children: [
                  ChatBubble(
                    text: "I'm in a meeting at the moment.\nWon't take more than 20 min.",
                    time: "11:45",
                    isSender: false,
                  ),
                  ChatBubble(
                    text: "I’ll Wait near the Skyler coffee shop",
                    time: "11:50",
                    isSender: true,
                  ),
                  ChatBubble(
                    text: "Try their hazelnut Mocha. It's the best.",
                    time: "12:00",
                    isSender: false,
                  ),
                  ChatBubble(
                    text: "It's 12:20. I’m leaving.",
                    time: "12:20",
                    isSender: true,
                  ),
                  ChatBubble(
                    text: "Rachel gave me some paperwork.\nGive me 5 more minutes. Please.",
                    time: "12:25",
                    isSender: false,
                  ),
                  ChatBubble(
                    text: "You deleted this message.",
                    time: "12:28",
                    isSender: true,
                    isDeleted: true,
                  ),
                  ChatBubble(
                    text: "Hey, I’m here. where are you?",
                    time: "12:25",
                    isSender: false,
                  ),
                  ChatBubble(
                    text: "I’m near the piano wearing red.",
                    time: "12:30",
                    isSender: true,
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              color: Colors.white,
              child: Row(
                children: [
                  IconButton(
                    icon: Icon(Icons.mic, color: Colors.blue),
                    onPressed: () {},
                  ),
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                        hintText: 'Type a message',
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                  IconButton(
                    icon: Icon(Icons.send, color: Colors.blue),
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ChatBubble extends StatelessWidget {
  final String text;
  final String time;
  final bool isSender;
  final bool isDeleted;

  const ChatBubble({
    Key? key,
    required this.text,
    required this.time,
    this.isSender = false,
    this.isDeleted = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final borderRadius = BorderRadius.only(
      topLeft: Radius.circular(16),
      topRight: Radius.circular(16),
      bottomLeft: isSender ? Radius.circular(16) : Radius.zero,
      bottomRight: isSender ? Radius.zero : Radius.circular(16),
    );

    return Align(
      alignment: isSender ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: EdgeInsets.only(bottom: 10),
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        decoration: BoxDecoration(
          color: isSender ? Colors.blue.shade100 : Colors.grey.shade200,
          borderRadius: borderRadius,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(
              text,
              style: TextStyle(
                color: isDeleted ? Colors.grey : Colors.black,
                fontSize: 16,
              ),
            ),
            SizedBox(height: 5),
            Text(
              time,
              style: TextStyle(
                color: Colors.grey,
                fontSize: 12,
              ),
            ),
          ],
        ),
      ),
    );
  }
}