В этом руководстве мы создадим функциональный клон iMessage с помощью Stream Chat Flutter SDK. Создание чата в вашем приложении в масштабе - непростая задача; но в этом руководстве вы научитесь общаться в чате примерно за 20 минут! Вы можете следовать этому руководству без глубоких знаний Flutter, базового понимания системы макета, строк и столбцов, которые мы сделаем.

Наши SDK можно использовать тремя способами. В зависимости от того, сколько абстракции вы хотите.

Поскольку мы пытаемся воспроизвести внешний вид приложения, в этом руководстве мы будем использовать способ, который дает нам наибольшую свободу настройки: stream_chat_flutter_core. Также стоит отметить, что для обеспечения согласованности с пакетом stream_chat_flutter мы сохраним соглашение об именах для виджетов.

Хотите прочитать эту историю позже? Сохранить в журнале.

Если вы потерялись во время этого урока, вы можете проверить:

- Репозиторий iMessage Clone на GitHub
- Учебник по Stream Chat Flutter

Результат работы нашего приложения будет похож на следующие скриншоты:

Давайте начнем! 🚀

Предпосылки

Чтобы продолжить работу с этим руководством, вам понадобится следующее:
- Flutter SDK
- учетная запись Stream. Вы можете создать его здесь, если у вас его нет.
- Редактор кода, такой как Visual Studio Code

Установите sdk в pubspec.yaml:

Не забудьте нажать в терминале flutter packages get, чтобы загрузить зависимости. Но обычно, если вы используете vscode, они будут загружены при сохранении или при запуске вашего кода.

Давайте сначала создадим статические представления, а затем добавим 🪄 немного волшебства Stream Flutter SDK здесь и там.

Сначала мы создадим представление списка, в котором перечислены все разговоры, а затем подробное представление этих разговоров.

ChannelPreview

Начнем с предварительного просмотра разговоров
В каждом элементе списка нам нужно отобразить три вещи:

  • контакт, отправивший сообщение, включая его аватар и имя
  • предварительный просмотр сообщения. Если есть медиа, покажите немного смайликов, указывающих, является ли это изображением или видео (да, наш продукт поддерживает все это 😉)
  • день недели и час, в который было получено сообщение. Если это было больше недели назад, нам придется изменить формат для более приятного UX.

Поскольку iMessage - это приложение для iPhone, мы будем использовать виджеты Cupertino, которые представляют собой высокоточные виджеты для текущей системы дизайна iOS.

Сделайте это интерактивным

Чтобы сделать наш виджет ChannelPreview интерактивным, мы используем GestureDetector, среди прочего этот виджет используется для обработки нажатий.

Формирование дат 📅

Для форматирования даты мы будем использовать пакет intl, который обычно используется для работы с интернационализированными / локализованными сообщениями, форматированием и анализом даты и чисел, двунаправленным текстом и другими проблемами интернационализации. Давайте определим эти служебные функции в utils.dart.

ChannelListView 📺

Для построения нашего списка мы будем использовать виджет Sliver. Лента - это всего лишь часть прокручиваемой области. Давайте назовем наш виджет ChannelListView, потому что в Stream, поскольку у нас есть разные сценарии использования, такие как прямая трансляция, поддержка клиентов и т. Д., Разговоры происходят в каналах.

ChatLoader ⌛

Давайте добавим красивый AppBar и обернем его в виджет, который мы называем ChatLoader. Не беспокойтесь о параметрах каналов, мы объясним позже, откуда они взялись.

MessagePage 📄

Теперь, когда у нас есть список, в котором отображается предварительный просмотр наших разговоров. Нам нужно перейти к отдельным пунктам. Назовем те элементы, которые содержат каждый разговор, MessagePage, поскольку он отображает сообщения. Нам понадобится панель навигации, чтобы отобразить контакт (аватар и имя), с которым мы ведем обсуждение, и отобразить список сообщений. Назовем это MessageListView. Опять же, забудьте о параметре сообщений. Посмотрим, как добавить их с помощью SDK для чата.

MessageListView

В MessageListView мы сгруппируем сообщения по дням, как в реальном приложении, и изменим цвет и отображение в зависимости от того, отправлено это сообщение или получено. Нам нужно будет «нарисовать» пузырек чата. Нам также понадобится ввод, чтобы отправлять эти сообщения и прикреплять к ним медиафайлы.

Группировать сообщения по дате

Для группировки сообщений по дням мы используем функцию groupBy для группировки элементов по значениям по значению, возвращаемому ключом из пакета коллекции.

Конечный результат

Затем нужно получить дату с помощью entries[index].key и список сообщений entries[index].value и обернуть это в построителе ListView, как показано ниже.

В итоге вот как будет выглядеть виджет MessageListView:

В нашем MessageWidget мы хотим проверить тип вложения, если это изображение или видео, и отобразить его соответствующим образом.

MessageWidget

В нашем `MessageWidget` мы хотим проверить тип вложения, если это изображение или видео, и отобразить его соответствующим образом.

ChatBubble 💬

Чтобы нарисовать наш пузырь, мы используем CustomPainter, который представляет собой виджет, используемый для рисования произвольных форм и контуров. Поверхность api немного похожа на холст html (если вы с ним знакомы). Давайте просто назовем этот виджет ChatBubble, который принимает в параметры цвет и выравнивание. Мы будем отображать пузырь по-разному в зависимости от выравнивания.

Ввод сообщения

На наш взгляд, теперь, когда мы отобразили сообщения, которые нам нужны для отправки сообщения. Для этого вызовем наш виджет MessageInput. Мы используем плагин ImagePicker, чтобы взять фотографию из галереи и загрузить ее вместе с нашим сообщением.

Приправьте его с помощью Stream Chat SDK 🌶️

Теперь, когда все настроено. «Как сделать настоящий чат?» Вы можете спросить.

Что ж, это просто, давайте инициализируем наш SDK и runApp для запуска нашего верхнего виджета IMessage, который мы еще не определили.

Для этого вам понадобится ключ API и токен пользователя, который вы можете получить в своей панели управления.

ChannelListCore

Помните, когда мы настраивали ChatLoader? ChannelListView принимал параметр channels, но мы не объяснили, откуда он берется. Пришло время добавить недостающий элемент. Позвольте представить вам,
двух ваших новых лучших друзей: ChannelsBloc и ChannelListCore. ChannelListCore предоставляет конструкторы, позволяющие настраивать обработку ошибок и прогресс загрузки, но, что наиболее важно, предоставляет List<Channel>. Он также имеет параметры для фильтров, сортировки и нумерации страниц.

Наш новый ChatLoader мы будем выглядеть так:

LazyLoadScrollView 🦥

LazyLoadScrollView - это оболочка для Scrollable, которая запускает onEndOfPage / onStartOfPage, когда Scrollable достигает начала или конца экстента просмотра. Он предоставляет обратные вызовы, такие как onRefresh, что удобно в нашем случае с controller.loadData() и controller.paginateData().

MessageListCore

Те же шаблоны используются для MessagePage, благодаря MessageListCore вы можете иметь доступ к разным конструкторам, включая тот, который предоставляет List<Message>:

Поздравляю! 👏

На этом завершается первая часть нашего руководства по созданию клона iMessage с помощью Stream's Flutter Chat SDK. Я надеюсь, что вы нашли это руководство полезным, и с нетерпением жду ваших отзывов.

В следующей статье, которая будет опубликована позже, мы расскажем, как реализовать такую ​​функцию, как Search, для поиска сообщений.

Удачного кодирования!

Первоначально опубликовано на https://getstream.io.

📝 Сохраните эту историю в Журнале.