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,
      home: ChatScreen(),
    );
  }
}

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFF3B82F6),
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () {},
        ),
        title: Row(
          children: [
            CircleAvatar(
              backgroundImage: NetworkImage(
                  'https://placehold.co/40x40?description=Profile%20picture%20of%20Tyler%20Benil'),
            ),
            SizedBox(width: 10),
            Text('Tyler Benil', style: TextStyle(color: Colors.white)),
          ],
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.videocam, color: Colors.white),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.call, color: Colors.white),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.more_vert, color: Colors.white),
            onPressed: () {},
          ),
        ],
      ),
      body: Container(
        color: Color(0xFFF3F4F6),
        child: ListView(
          padding: EdgeInsets.all(10),
          children: [
            ChatBubble(
              text: "I'm in a meeting at the moment. Won't take more than 20 min.",
              time: "11:45",
              isSent: false,
            ),
            ChatBubble(
              text: "I'll Wait near the Skyler coffee shop",
              time: "11:50",
              isSent: true,
            ),
            ChatBubble(
              text: "Try their hazelnut Mocha. It's the best.",
              time: "12:00",
              isSent: false,
            ),
            ChatBubble(
              text: "It's 12:20. I'm leaving.",
              time: "12:20",
              isSent: true,
            ),
            ChatBubble(
              text: "Rachel gave me some paperwork. Give me 5 more minutes. Please.",
              time: "12:25",
              isSent: false,
            ),
            ChatBubble(
              text: "You deleted this message.",
              time: "12:28",
              isSent: true,
              isDeleted: true,
            ),
            ChatBubble(
              text: "Hey, I'm here. where are you?",
              time: "12:25",
              isSent: false,
            ),
            ChatBubble(
              text: "I'm near the piano wearing red.",
              time: "12:30",
              isSent: true,
            ),
          ],
        ),
      ),
    );
  }
}

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

  ChatBubble({
    required this.text,
    required this.time,
    required this.isSent,
    this.isDeleted = false,
  });

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: isSent ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 5),
        padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
        decoration: BoxDecoration(
          color: isDeleted
              ? Colors.transparent
              : isSent
                  ? Color(0xFFE0F2FE)
                  : Colors.white,
          borderRadius: BorderRadius.circular(10),
          border: isDeleted ? Border.all(color: Colors.grey) : null,
        ),
        child: Column(
          crossAxisAlignment:
              isSent ? CrossAxisAlignment.end : CrossAxisAlignment.start,
          children: [
            Text(
              text,
              style: TextStyle(
                color: isDeleted ? Colors.grey : Colors.black,
                fontStyle: isDeleted ? FontStyle.italic : FontStyle.normal,
              ),
            ),
            SizedBox(height: 5),
            Text(
              time,
              style: TextStyle(
                color: Colors.grey,
                fontSize: 12,
              ),
            ),
          ],
        ),
      ),
    );
  }
}