> For the complete documentation index, see [llms.txt](https://sumiths-organization.gitbook.io/workshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sumiths-organization.gitbook.io/workshop/message.md).

# Message

The inner widget to show the conversation

Create a new file message\_widget.dart

```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

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

&#x20;![](https://1152880144-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfGzGiAk2i26VFwzFPfXs%2Fuploads%2Fn2tA4RPzrqS4L3JVppSL%2Fimage.png?alt=media\&token=b1642258-dc68-407a-ae31-8a4c0ab1d75b)
