Message

The inner widget to show the conversation

Create a new file message_widget.dart

import 'package:flutter/material.dart';

class MessageWidget extends StatelessWidget {
  const MessageWidget(
      {super.key, required this.text, required this.isFromUser});

  final String text;
  final bool isFromUser;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment:
          isFromUser ? MainAxisAlignment.end : MainAxisAlignment.start,
      children: [
        Flexible(
          child: Container(
            constraints: const BoxConstraints(maxWidth: 600),
            decoration: BoxDecoration(
              color: isFromUser
                  ? Theme.of(context).primaryColor
                  : Theme.of(context).scaffoldBackgroundColor,
              borderRadius: BorderRadius.circular(18),
            ),
            padding: const EdgeInsets.symmetric(
              vertical: 15,
              horizontal: 20,
            ),
            margin: const EdgeInsets.only(bottom: 8),
            child: Text(
              text,
              style: TextStyle(color: isFromUser ? Colors.white : null),
            ),
          ),
        ),
      ],
    );
  }
}

Modify chat_widget.dart look for ListView b

 ListView.builder(
            shrinkWrap: true,
            controller: _scrollController,
            itemBuilder: (context, idx) {
              return MessageWidget(
                text: "text",
                isFromUser: 'user' == 'user',
              );
            },
            itemCount: 2,
          ),