chat_message.dart

chat_message.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: const Color.fromARGB(255, 18, 32, 47),
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: MessagesList(),
        ),
      ),
    );
  }
}

const messageMaxWidth = 310.0;

class MessagesList extends StatelessWidget {
  const MessagesList({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Message(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: Container(width: 150, height: 150, color: Colors.red),
            ),
          ],
        ),
        const SizedBox(
          height: 8,
        ),
        Message(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: Container(width: 150, height: 150, color: Colors.red),
            ),
            const Padding(
              padding: EdgeInsets.all(8),
              child: Text(
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
              ),
            )
          ],
        ),
        const SizedBox(
          height: 8,
        ),
        const Message(
          children: [
            Padding(
              padding: EdgeInsets.all(8),
              child: Text(
                "Lorem",
              ),
            )
          ],
        ),
        const SizedBox(
          height: 8,
        ),
        Message(
          children: [
            const Padding(
              padding: EdgeInsets.all(8),
              child: Column(
                children: [
                  Text(
                    "Lorem",
                  ),
                ],
              ),
            ),
            const SizedBox(
              height: 4,
            ),
            ClipRRect(
              borderRadius: const BorderRadius.only(
                bottomLeft: Radius.circular(12),
                bottomRight: Radius.circular(12),
              ),
              child: Container(
                width: messageMaxWidth,
                height: 200,
                color: Colors.purple,
              ),
            ),
          ],
        )
      ],
    );
  }
}

class Message extends StatelessWidget {
  final List<Widget> children;

  const Message({
    super.key,
    required this.children,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Container(
          width: 32,
          height: 32,
          decoration: const BoxDecoration(
            color: Colors.pink,
            shape: BoxShape.circle,
          ),
        ),
        const SizedBox(
          width: 8,
        ),
        Container(
          constraints: const BoxConstraints(
            maxWidth: messageMaxWidth,
          ),
          decoration: const BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.all(
              Radius.circular(
                12,
              ),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: children,
          ),
        )
      ],
    );
  }
}