chat_message_composer #

Редактор сообщений для чата с поддержкой форматирования текста и вставки файлов.

Описание #

chat_message_composer — это Flutter пакет, предоставляющий полнофункциональный редактор текста для чата с поддержкой:

Форматирования текста: жирный, курсив, подчеркивание, зачеркивание, списки, цитаты, блоки кода, ссылки
Вложений: изображения, видео и документы — выбор файлов, drag-and-drop (desktop), вставка из буфера обмена, съёмка фото с камеры
Упоминаний: панель «@» с поиском и навигацией стрелками
Режимов composing: обычный ввод, редактирование и цитирование/ответ на сообщение
Эмодзи: поиск и вставка, включая замену клавиатуры на панель эмодзи на мобильных устройствах
Интуитивного интерфейса: панель инструментов, кнопки управления и визуальное отображение прикрепленных файлов

Установка #

Добавьте зависимость в ваш pubspec.yaml:

dependencies:
  chat_message_composer: ^1.0.0

Затем выполните:

flutter pub get

Настройка платформ #

iOS #

Для использования камеры и выбора изображений из библиотеки на iOS необходимо добавить следующие ключи в файл Info.plist (расположен в <project root>/ios/Runner/Info.plist):

<key>NSPhotoLibraryUsageDescription</key>
<string>Приложению необходим доступ к библиотеке фотографий для выбора изображений</string>

<key>NSCameraUsageDescription</key>
<string>Приложению необходим доступ к камере для съемки фотографий</string>

Android #

На Android дополнительная настройка не требуется — плагин работает из коробки.

Быстрый старт #

1. Реализуйте репозиторий локализации #

Создайте класс, реализующий ChatMessageComposerLocalizationRepository:

import 'package:chat_message_composer/chat_message_composer.dart';

class MyLocalizationRepository implements ChatMessageComposerLocalizationRepository {
  @override
  String get camera => 'Камера';

  @override
  String get messageText => 'Введите сообщение...';

  @override
  String get insertImageOrVideo => 'Вставить изображение или видео';

  @override
  String get insertDocument => 'Вставить документ';

  @override
  String get attachContact => 'Прикрепить контакт';

  @override
  String get createPoll => 'Новый опрос';

  @override
  String get createEvent => 'Запланировать событие';

  @override
  String get editingMessage => 'Редактирование сообщения';

  @override
  String get filesLabel => 'Файлы';

  @override
  String mentionPanelError(String error) => 'Ошибка: $error';

  @override
  String get mentionPanelNoUsersFound => 'Пользователи не найдены';

  @override
  String get emojiNotFound => 'Эмодзи не найдены';

  @override
  String get emojiSearch => 'Поиск';
}

2. Используйте ChatMessageComposer #

Оберните ChatMessageComposer в ChatMessageComposerScope:

import 'package:flutter/material.dart';
import 'package:chat_message_composer/chat_message_composer.dart';
import 'package:flutter_quill/flutter_quill.dart';

class ChatPage extends StatelessWidget {
  const ChatPage({super.key});

  @override
  Widget build(BuildContext context) {
    final localizationRepository = MyLocalizationRepository();

    return Scaffold(
      body: ChatMessageComposerScope(
        localizationRepository: localizationRepository,
        mentionRepository: mentionRepository, // реализация MentionRepository
        child: ChatMessageComposer(
          onSendTap: (ChatMessageComposerMessageData message, ChatMessageComposerSendAction action) {
            final text = message.document.toPlainText();
            final files = message.files;
            print('Отправлено: $text, файлов: ${files.length}');
          },
        ),
      ),
    );
  }
}

3. Настройте локализацию (опционально) #

Если вы используете flutter_localizations, добавьте делегат для FlutterQuillLocalizations:

MaterialApp(
  localizationsDelegates: const [
    FlutterQuillLocalizations.delegate,
    // ... другие делегаты
  ],
  // ...
)

Основные компоненты #