Введение. В этой статье будет рассказано, как использовать Flutter для разработки приложения чата, поддерживающего несколько языков и настроек тем, а также объединить его с ChatGPT для реализации интеллектуальных функций чата.

Больше никакой ерунды,Этот проект использует напрямуюШаблон флаттера с открытым исходным кодомОдна минута для инициализации,и уже через день первый из них был доступен для использованияиз Версия,Версия для macOS доступна для скачивания в проекте.,Другие версии могут быть собраны самостоятельно. xxx Способ производства.

Вставьте адрес проекта напрямую：https://github.com/bravekingzhang/flutter_chat_box

Поддерживаемые функции:

Полная поддержка платформы

• macOS ✅
• Linux✅
• Windows✅
• Android✅
• iOS✅

Ядро технологии Framework

• Многоязычная поддержка, вы можете легко переключаться между китайским и английским языками.
• Поддержка модульного тестирования и поддержка тестирования компонентов обеспечивают высокое качество кода.
• отличныйиз Глобальное управление данными Способ flutter_bloc, идеальная многоуровневая изоляция бизнес-логики и кода пользовательского интерфейса.
• flutter_bloc_test, блок также можно протестировать, полностью вне связи с интерфейсом.
• Переключение темы, переключение между темным и дневным режимами по желанию, защита ваших глаз.
• Унифицированное управление маршрутизацией устраняет проблему неудобного управления собственной маршрутизацией Flutter.
• Font_awesome_flutter обеспечивает неограниченное использование значков и устраняет панику из-за недостаточного количества системных значков.

1. Предыстория

Flutterэто кроссплатформенныйизсреда разработки приложений,ониз Преимущество в том, что его можно использовать для разработки.iOS、Android、Webи Настольное приложение,И один набор кодов решает множество проблем. сейчас,Приложение ChatGPT находится на подъеме,Как предоставить пользователям более удобный и интеллектуальный чат с обновленным интерфейсом,это сложная проблема,Конечно, для тех, у когоchatGPTПомощь в написании кодаизслучай,Кажется, это не сложно,например,Этот мой проект опирается наchatGPTТехническая поддержкаиз Артефакт редактирования кодаhttps://www.cursor.so/ На выполнение уходит около 1 дня.

2. Реализация

Чтобы добиться адаптации между мобильным и настольным компьютеромизприложение для чата,Мы сделаем это, используя фреймворк Flutter.,К ним относятся Интерфейс чатаи Реализация логики чата、Глобальное управление даннымиимногоязычный、Настройки темыизподдерживать,и сChatGPTпоговоритьизвыполнить。

Интерфейс чата

1. Реализация интерфейса чата

Во Flutter вы можете использовать компонент ListView для отображения записей чата и использовать различные компоненты пользовательского интерфейса для отображения в зависимости от типа сообщения. Например, мы можем использовать компоненты «Текст» и «изображение» для отображения текстовых сообщений и графических сообщений. В первой версии мы не рассматриваем отображение изображений, а только отображение кода и обычного текста. Поэтому с этим справится простое представление списка. Единственная деталь — представить содержание разговора с помощью ChatGPT в виде чата.

Логику кода можно найти здесь：/main/lib/components/chat.dart

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

Expanded(
              child: Scrollbar(
                controller: _scrollController,
                thumbVisibility: true,
                child: BlocBuilder<MessageBloc, MessageState>(
                  builder: (context, state) {
                    WidgetsBinding.instance.addPostFrameCallback((_) {
                      _scrollToNewMessage();
                    });
                    if (state.runtimeType == MessagesLoaded) {
                      var currentState = state as MessagesLoaded;
                      return ListView.builder(
                        controller: _scrollController,
                        itemCount: currentState.messages.length,
                        itemBuilder: (context, index) {
                          return _buildMessageCard(
                              currentState.messages[index]);
                        },
                      );
                    } else {
                      return _buildExpandEmptyListView();
                    }
                  },
                ),
              ),
            ),

Реализация логики чата

После того как пользователь вводит сообщение, нам необходимо обработать сообщение и отправить его в соответствующее окно чата. За ним должны быть две таблицы данных [таблица сеанса и таблица информации о чате, которые необходимо связать с мастером сеанса. conversationId ,может пройтиuuidгенерировать]записать насиchatGPTдиалогиз Весь контент,Тогда в это время должна быть необходимостьсессияиз Концепция здесь,так,выполнитьиз Идея в том,：

1、Если сессии нет, создайте беседу сессия
2. С разговоромId сессии , отнесите этот идентификатор message Вставьте в таблицу вопрос, который мы задали в чатGPT.
3. С этим вопросом задайте чатGPT API Запрос интерфейса
4. Поскольку нам нужно добиться эффектов типизации, мы вызываем потоковый API, который отличается от наших обычных вызовов API. Интерфейс немного другой
Обычно один вызов возвращает один раз, но потоковый вызов возвращает несколько раз, поэтому мы можем использовать dart из stream API справиться
5、но лучшеиз Способ是,Используйте flutter_bloc, таким образом, мы можем преобразовать интерфейс UI и Логическая часть сделана хорошо.изизоляция,Простота обслуживания

Глобальное управление данными

Flutter_bloc можно использовать в приложениях Flutter управление даннымибиблиотека для лучшего управления глобальными данными。Мы можем записать чатизполучать、многоязычныйи Настройки темы等操作集中处理,для облегчения управленияиподдерживать。

Поддержка нескольких языков и тем

Flutter предоставляет API-интерфейсы интернационализации и управления темами. Мы можем централизованно хранить различные файлы ресурсов языка и тем, необходимые приложению, и загружать соответствующие файлы ресурсов в соответствии с языком и темой, выбранными пользователем при запуске приложения. Для этого я использую flutter_bloc. часть. выполнить,Есть польза,В этой библиотеке есть плагин Hydrated_bloc, который может поддерживать очень удобное для меня кэширование локальных настроек.。

Ведите умное общение с ChatGPT

ChatGPT — это API чат-бота, который предоставляет пользователям интеллектуальные возможности чата. В приложении Flutter мы можем использовать HTTP-запросы для отправки запросов в ChatGPT, а вся логика находится в flutter_bloc. инкапсулированный Выполнено по логике, конечно здесь оно используется flutter pub Предоставлено другими dart доступ openAi из Сторонние библиотеки。Его основную логику можно найти здесь.：/blob/main/lib/repository/message.dart