套件詳情v2.0.2

flutter_chat_bubble

為Flutter應用開發取得頂尖的聊天UI元件。創造類似WhatsApp和Telegram的多樣化設計。自訂屬性以實現驚艷的使用者介面。提升技能，提升即時通訊應用的使用者體驗。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 1.1萬
喜歡數: 329
Pub 分數: 150

安裝套件

flutter pub add flutter_chat_bubble

套件介紹

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

一個 Flutter 套件，提供可自訂的聊天氣泡 UI，用於建構即時通訊介面。受到 WhatsApp 和 Telegram 等流行應用的啟發，讓開發者能在多個平台建立視覺上吸引人且互動性強的聊天體驗。透過廣泛的顏色、形狀與動畫自訂選項，能滿足多元設計需求，同時維持高效能。非常適合提升通訊導向應用的使用者參與度。

適用情境

即時訊息應用
客戶支援聊天介面
社交媒體訊息功能
群聊實現
應用內通知，聊天風格
教育類應用程式討論區

主要特色

可自定義氣泡樣式
支援訊息對齊（左/右）
內建動畫效果
跨平台相容性
與現有聊天邏輯的輕鬆整合
適用於所有螢幕尺寸的響應式設計

適合對象

開發聊天應用的開發者
UI設計師尋找可重用組件
創建多平台訊息解決方案的團隊
初創公司正在原型設計通訊功能
專注於使用者體驗提升的前端工程師

使用建議

需要額外的狀態管理才能實現完整的聊天功能
可能需要自定樣式來處理複雜佈局
大型訊息清單的效能影響
有限的內建輸入指示器或已讀回執
並非開箱即用的完整聊天解決方案

原始 README

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

Flutter Chat Bubble/UI

Discover the ultimate Flutter widget for creating diverse chat UI designs like WhatsApp, Telegram, and more. With its customizable properties, create stunning chat UI and elevate the user experience in your messaging app. Enhance your Flutter development skills with this top-notch chat UI widget and make a mark in the world of real-time communication.

Usage

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_chat_bubble: <latest-version>

Examples

Easily create dynamic chat bubbles with the ChatBubble widget in Flutter with the extensive range of properties.

Example 1

  ChatBubble(
        clipper: ChatBubbleClipper1(type: BubbleType.sendBubble),
        alignment: Alignment.topRight,
        margin: EdgeInsets.only(top: 20),
        backGroundColor: Colors.blue,
        child: Container(
          constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width * 0.7,
          ),
          child: Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            style: TextStyle(color: Colors.white),
          ),
        ),
      )
  
  ChatBubble(
    clipper: ChatBubbleClipper1(type: BubbleType.receiverBubble),
    backGroundColor: Color(0xffE7E7ED),
    margin: EdgeInsets.only(top: 20),
    child: Container(
      constraints: BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width * 0.7,
      ),
      child: Text(
        "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat",
        style: TextStyle(color: Colors.black),
      ),
    ),
  )

Example 2

ChatBubble(
    clipper: ChatBubbleClipper2(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper2(type: BubbleType.receiverBubble),
  )

Example 3

ChatBubble(
    clipper: ChatBubbleClipper3(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper3(type: BubbleType.receiverBubble),
  )

Example 4

ChatBubble(
    clipper: ChatBubbleClipper4(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper4(type: BubbleType.receiverBubble),
  )

Example 5

ChatBubble(
    clipper: ChatBubbleClipper5(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper5(type: BubbleType.receiverBubble),
  )

Example 6

ChatBubble(
    clipper: ChatBubbleClipper6(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper6(type: BubbleType.receiverBubble),
  )

Example 7

ChatBubble(
    clipper: ChatBubbleClipper7(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper7(type: BubbleType.receiverBubble),
  )

Example 8

ChatBubble(
    clipper: ChatBubbleClipper8(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper8(type: BubbleType.receiverBubble),
  )

Example 9

ChatBubble(
    clipper: ChatBubbleClipper9(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper9(type: BubbleType.receiverBubble),
  )

Example 10

ChatBubble(
    clipper: ChatBubbleClipper10(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper10(type: BubbleType.receiverBubble),
  )