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(
        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, color: Colors.white),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: Row(
          children: [
            CircleAvatar(
              backgroundImage: NetworkImage('https://placehold.co/40x40?description=Profile%20Image'),
            ),
            SizedBox(width: 8),
            Text('Tyler Benil'),
          ],
        ),
        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: () {},
          ),
        ],
        backgroundColor: Colors.blue[800],
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              padding: EdgeInsets.all(16),
              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: 8),
            color: Colors.white,
            child: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.mic, color: Colors.blue),
                  onPressed: () {},
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration.collapsed(
                      hintText: 'Type a message',
                    ),
                  ),
                ),
                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 bg = isSender ? Colors.blue[100] : Colors.grey[200];
    final align = isSender ? CrossAxisAlignment.end : CrossAxisAlignment.start;
    final icon = isSender ? Icons.done_all : null;
    final radius = isSender
        ? BorderRadius.only(
            topLeft: Radius.circular(16),
            bottomLeft: Radius.circular(16),
            bottomRight: Radius.circular(16),
          )
        : BorderRadius.only(
            topRight: Radius.circular(16),
            bottomLeft: Radius.circular(16),
            bottomRight: Radius.circular(16),
          );

    return Column(
      crossAxisAlignment: align,
      children: [
        Container(
          margin: EdgeInsets.all(4),
          padding: EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: bg,
            borderRadius: radius,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                text,
                style: TextStyle(
                  color: isDeleted ? Colors.black54 : Colors.black87,
                  fontStyle: isDeleted ? FontStyle.italic : FontStyle.normal,
                ),
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    time,
                    style: TextStyle(
                      color: Colors.black45,
                      fontSize: 12,
                    ),
                  ),
                  if (icon != null) ...[
                    SizedBox(width: 4),
                    Icon(
                      icon,
                      size: 12,
                      color: Colors.black45,
                    ),
                  ],
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}