搜尋套件、儲存庫與 APP 分類

floating_chat_button 封面
套件詳情v1.1.0

floating_chat_button

一個可拖曳至螢幕任意位置的浮動按鈕,可向使用者顯示訊息

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
235
喜歡數
56
Pub 分數
150

安裝套件

flutter pub add floating_chat_button

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個 Flutter 套件,提供可拖曳的浮動按鈕,用於向使用者顯示訊息。該按鈕可在螢幕上自由移動,非常適合互動式聊天介面或應用內通知。支援多個平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,確保在各裝置上行為一致。設計簡潔易用,透過提供持續且易存取的通訊元件,提升使用者參與度。

適用情境

  • 應用內訊息系統
  • 用戶支援聊天組件
  • 互動式 UI 元素
  • 即時通知顯示
  • 以行動裝置為先的聊天介面

主要特色

  • 可拖動的介面
  • 跨平台相容性
  • 訊息顯示功能
  • 可自定位置
  • 響應式設計
  • 與 Flutter 的輕鬆整合

適合對象

  • 開發聊天應用的開發者
  • 尋求互動元件的UI設計師
  • 需要持續用戶通知的應用程式
  • 跨平台移動應用程式
  • 簡單而有效的溝通工具

使用建議

  • 可能需要額外的樣式才能實現複雜的佈局
  • 對低階設備的效能影響
  • 僅限基本訊息渲染
  • 不適用於高流量聊天流
  • 需要仔細放置以避免UI雜亂

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

Show a draggable floating chat icon button and show messages on screens

Features

A widget for displaying a chat icon (or custom widget) on top of a background widget.

It can show and hide messages or display a message that is passed in its constructor.

Alt text Alt text Alt text

Getting started

Add it as the body of a scaffold (or other full screen view) and then supply the widget that should be shown under the chat widget as the background parameter.

Alternately, use a stack view to position the chat widget and leave the background as null.

The FloatingChatIcon will default to a blue circle with white chat icon and the messageWidget will default to a blue rounded rectangle with white text. All of these colours can be configured or custom widgets can be passed to chatIconWidget, messageWidget or messageTextWidget.

The ShowMessageParameters allows you to show the message passed to the constructor after a given delayDuration, for the amount of time specified in durationToShowMessage and at a random frequency (eg "Only show this message 50% of the time that the widget is instantiated") with showMessageFrequency.

Usage

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FloatingChatButton(
          background: BackgroundWidget(),
          onTap: (_) {
            _showBottomSheet(context);
          },
          messageText: "I like this package",
      )
    );
  }

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。