Flutter Chat: Highly Customizable Conversation UI

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/chat.dart';

class ChatSample extends StatefulWidget {
  const ChatSample({super.key});

  @override
  State<StatefulWidget> createState() => ChatSampleState();
}

class ChatSampleState extends State<ChatSample> {
    
  late List<ChatMessage> _messages;

  @override
  void initState() {
    _messages = <ChatMessage>[
      ChatMessage(
        text: 'Hello, how can I help you today?',
        time: DateTime.now(),
        author: const ChatAuthor(
          id: 'a2c4-56h8-9x01-2a3d',
          name: 'Incoming user name',
        ),
      ),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SfChat(
          messages: _messages,
          outgoingUser: '8ob3-b720-g9s6-25s8',
          composer: const ChatComposer(
            decoration: InputDecoration(
              hintText: 'Type a message',
            ),
          ),
          actionButton: ChatActionButton(
            onPressed: (String newMessage) {
              setState(() {
                _messages.add(ChatMessage(
                  text: newMessage,
                  time: DateTime.now(),
                  author: const ChatAuthor(
                    id: '8ob3-b720-g9s6-25s8',
                    name: 'Outgoing user name',
                  ),
                ));
              });
            },
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _messages.clear();
    super.dispose();
  }
}