swifty_chat

QuickReply, Text, Image Html Carousel Custom

Platforms

  • x iOS, macOS
  • x Android
  • x 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

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.

Libraries

swifty_chat