DOCSEARCHbyAlgolia
Submit Docs

Flyer Chat UI SDK

repository·main·Indexed 25 days ago

https://github.com/flyerhq/flutter_chat_ui

An open-source, backend-agnostic chat UI SDK for Flutter designed for real-time messengers, AI agents, and support platforms. The ecosystem includes flutter_chat_ui for the interface, flutter_chat_core for data models and controllers, cross_cache for cross-platform image caching, and flutter_link_previewer for rich URL previews.

Tokens
18.6K
Snippets
35
Records
75
Agent score
80%

What's inside flutter_chat_ui

  1. Overview of Flyer Chat packages

    main

    Core Packages

    These are the foundational packages included when you install flutter_chat_ui:

    • flutter_chat_ui: The main UI package.
    • flutter_chat_core: Contains core models, controllers, theming, and utilities used across the ecosystem.
    • cross_cache: Provides a cross-platform (IO & Web) image caching solution.

    Optional Message Widget Packages

    Opinionated packages for rendering different message types. You can also build your own!

    • flyer_chat_text_message: Renders text messages with markdown support.
    • flyer_chat_text_stream_message: Renders streamed text messages with markdown and fade-in animation support.
    • flyer_chat_image_message: Renders image messages.
    • flyer_chat_file_message: Renders file messages.
    • flyer_chat_system_message: Renders system messages (e.g., user joined).

  3. Features of FlyerChatImageMessage

    main

    The FlyerChatImageMessage widget includes the following capabilities:

    • Cross-Platform Caching: Uses cross_cache to cache images across all platforms, including web.
    • Progress Indicators: Built-in indicators for image upload and download progress.
    • Loading Placeholders: Supports Blurhash or Thumbhash placeholders during image loading.
    • Aspect Ratio Preservation: Maintains correct dimensions during loading to prevent layout shifts (requires width/height to be present in the message model).
    • Optional Overlay: Supports overlays for content such as NSFW warnings or hidden messages.

  5. Implement text stream state management

    main

    The FlyerChatTextStreamMessage widget is a UI-only component. To use it successfully, you must implement the following logic in your application:

    1. Stream Management: Create and manage the actual text stream (fetching data and handling incoming chunks).
    2. State Tracking: Implement a state management solution to track the status of each stream ID (e.g., Loading, Streaming, Completed, or Error).
    3. State Injection: Pass the appropriate StreamState to the FlyerChatTextStreamMessage widget via the textStreamMessageBuilder.
    4. Finalization: Once a stream completes or encounters an error, update your ChatController to replace the TextStreamMessage with a standard TextMessage to ensure the message is persisted correctly in the chat history.

  6. Understand the purpose of flutter_chat_core

    main

    The flutter_chat_core package serves as the foundation for the Flyer Chat ecosystem. It provides essential building blocks that are used implicitly when working with the Chat widget in flutter_chat_ui.

    Key components include:

    • Data Models: Message models (e.g., text messages, image messages) used for managing chat data.
    • Controllers: ChatController interfaces for managing chat state.
    • Theming: ChatTheme for visual customization.
    • Utilities: Various builders and helper classes.

  7. How CrossCache handles storage across platforms

    main

    The storage mechanism for CrossCache varies by platform:

    • Web: Uses the idb_shim package to store Uint8List data in an IndexedDB object store named data within a database called cross_cache_db. The cache key is used directly as the IndexedDB key.
    • IO: Uses the path_provider package to access the application's cache directory. It creates a cross_cache subdirectory. The provided cache key is SHA256 hashed to create a unique filename, and the Uint8List data is written to that file.

  8. Integrate LinkPreview with flutter_chat_ui

    main

    To integrate with flutter_chat_ui, provide a linkPreviewBuilder within the Builders object passed to the Chat widget.

    When the builder is called, use the onLinkPreviewDataFetched callback to update the message via your ChatController. This ensures the fetched linkPreviewData is saved into the message's metadata, allowing for efficient caching and preventing re-fetching when the message is re-rendered.

    import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:flutter_link_previewer/flutter_link_previewer.dart';
import 'package:flutter_chat_core/flutter_chat_core.dart';

Chat(
  // ... other Chat properties
  builders: Builders(
    linkPreviewBuilder: (context, message, isSentByMe) {
      return LinkPreview(
        text: message.text,
        linkPreviewData: message.linkPreviewData,
        onLinkPreviewDataFetched: (linkPreviewData) {
          // Use the chat controller to update the message with the fetched data.
          // This will automatically save it in the message's metadata.
          _chatController.updateMessage(
            message,
            message.copyWith(linkPreviewData: linkPreviewData),
          );
        },
        // You can still customize the appearance
        parentContent: message.text,
      );
    },
    // ... other builders
  ),
)