swifty_chat #

QuickReply, Text, Image	Html	Carousel	Custom

Platforms #

• ✅ iOS, macOS
• ✅ Android
• ✅ Web

Features #

Supported Message types;

• Text
• Image
  • An ImageProvider is required, so you can use network or asset images.
• Html
  • flutter_html package is used for displaying HTMLs, so we have support what package supports.
• QuickReply
• Carousel
• Custom
  • See CustomMessage.md for details.

Other;

• Scroll to bottom
  • Pass a ChatController to Chat, then call controller.scrollToBottom().

Usage #

Requires Flutter 3.41.0 or later. This example sends text messages using concrete Message and ChatUser classes:

import 'package:flutter/material.dart';
import 'package:swifty_chat/swifty_chat.dart';

void main() => runApp(const MaterialApp(home: ChatExample()));

class AppUser extends ChatUser {
  AppUser(String name) : super(userName: name);
}

class AppMessage extends Message {
  const AppMessage({
    required super.user,
    required super.id,
    required super.isMe,
    required super.messageKind,
    required super.date,
  });
}

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

  @override
  State<ChatExample> createState() => _ChatExampleState();
}

class _ChatExampleState extends State<ChatExample> {
  final _messages = <Message>[];
  final _controller = ChatController();
  final _me = AppUser('You');

  @override
  Widget build(BuildContext context) => Scaffold(
    body: Chat(
      controller: _controller,
      messages: _messages,
      chatMessageInputField: MessageInputField(
        sendButtonTapped: (text) {
          final now = DateTime.now();
          setState(
            () => _messages.insert(
              0,
              AppMessage(
                user: _me,
                id: now.microsecondsSinceEpoch.toString(),
                isMe: true,
                messageKind: MessageKind.text(text),
                date: now,
              ),
            ),
          );
          _controller.scrollToBottom();
        },
      ),
    ),
  );
}

Messages are ordered newest first. For other message kinds, see MessageKind and the BasicChat and AdvancedChat demos. QuickReplyItem and CarouselItem require concrete subclasses when used.

Message widget tap actions #

Pass onMessagePressed, onQuickReplyItemPressed, onCarouselButtonItemPressed, or onHtmlWidgetPressed to the Chat constructor. See AdvancedChat for all four callbacks.

When migrating from 2.x, use the widget returned by setOn* methods. Calling one of these methods without using its return value no longer registers the callback.

Avatar #

To set avatar for a ChatUser, simply pass avatar parameter of the related user.

UserAvatar({
    required this.imageProvider, // ImageProvider
    this.size = 40,
    this.position = AvatarPosition.center, // top, center, bottom
});

Theming #

Visit Theming.md for details.

Custom Message #

Visit CustomMessage.md for details.

Message Cell Size Configuration #

Visit MessageCellSizeConfiguration.md for details.